Center Div in CSS Horizontally
Iam trying to centre a div Horizontally. I added "text-align: center" to div. But it does not work. Can you please add your suggestions?
Sign in to track your courses, save progress, and apply for internships. Sign in or create an account.
7 Answers
Except in IE6, this is a bug.
You can fix the width of the block using margin: 0 auto
#block_div{
margin: 0 auto;
width: 200px;
border: 1px solid red;
}
<div id="block_div">center a div using css</div>
To center div in CSS Horizontally, Just use text-align property with value center property
Suppose this is your HTML ELement
<div class="container">
<p>This text needs to center Horizontally</p>
</div>
<style>
.container {
font-size: 25px;
width: 450px;
margin: 35px;
height: 200px;
font-family: arial;
outline: dashed 2px black;
}
</style>
p {
/* To Center horizontally*/
text-align: center;
}
To center an element horizontally with Flexbox, just apply justify-content: center and display: flex to the parent element:
<div class="container">
<div class="child_class"></div>
</div>
.container {
margin: 35px;
width: 450px;
font-family: arial;
font-size: 25px;
height: 300px;
outline: dashed 1px black;
justify-content: center;
display: flex;
}
.child_class {
height: 50px;
width: 50px;
background-color: green;
}
To center a <div> horizontally, you can use the following CSS properties:
.center-div {
margin: 0 auto; /* This centers the div horizontally */
}
Margin: 0 auto;: This sets the top and bottom margins to 0 and the left and right margins to "auto", which effectively centers the <div> horizontally within its containing element.
Then, apply the center-div class to the <div> you want to center:
<div class="center-div">
<!-- Content goes here -->
</div>
.parent-div {
display: flex;
justify-content: center;
}
Can do it by
1| .div{
margin: 0 auto;
}
2| .div{
display : flex;
justify-content : center
}
.parent-div{
display: flex;
justify-content: center
}
