Sometimes we need to horizontally center a div that is within another div using CSS that make the inner element center horizontally.
In that case, you don’t have to set the width to 50%. So, any width which is less than the containing div will work.
Let’s see how to horizontally center a div.
For example, you have the following HTML:
<div id="outerDiv" style="width: 100%"> <div id="innerDiv">Content goes here...</div> </div>
Apply this CSS to the inner div:
#innerDiv {
width: 50%;
margin: 0 auto;
}
The margin: 0 auto is what does the actual centering.
#outerDiv {
width: 100%;
text-align: center;
}
That makes the inner div centered with text-align.
Read Also: Align text vertically next to an image
If you are targeting IE8+, then you can use this instead:
#innerDiv {
display: table;
margin: 0 auto;
}
This will make the inner element center horizontally without setting a specific width.
Using box model:
#outerDiv{
width:100%;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
}
#innerDiv{
width:50%;
}
If you are targeting IE8+, this might be better to have this instead:
#innerDiv {
display: table;
margin: 0 auto;
}
This will make the inner element center horizontally and this works also without setting a specific width.