Horizontally center a div in a div

How can I horizontally center a div within a div using CSS (if it's even possible)?
The outer div has width:100%:
<div id="outer" style="width:100%">  
  <div id="inner">Foo foo</div>
</div>


Answer :

You can apply this CSS to the inner div:
#inner {
    width: 50%;
    margin: 0 auto; 
}
Of course, you don't have to set the width to 50%. Any width less than the containing div will work. The margin: 0 auto is what does the actual centering.
If you are targeting IE8+, it might be better to have this instead:
#inner {
    display: table;
    margin: 0 auto;
}
It will make the inner element center horizontally and it works without setting a specific width.
Working example here:
#inner {
    display: table;
    margin: 0 auto; 
}
<div id="outer" style="width:100%">  
  <div id="inner">Foo foo</div>
</div>




TAGS : | | | |