CSS align an element center within a div

Assume:

<div id="outer" style="width:100%"> <div id="inner">Foo foo</div> </div>

There are few ways to achieve it:

#outer { width: 100%; text-align: center; } #inner { display: inline-block; }

OR

#inner { width: 50%; margin: 0 auto; }

OR IE8

#inner { display: table; margin: 0 auto; }

OR

.centered { position: fixed; left: 50%; margin-left: -100px; }

OR Css 3 (note that IE not support CSS3 fully)

#outer{ 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; } #inner{ width:50%; }

For more reference:

http://stackoverflow.com/questions/114543/how-to-center-a-div-in-a-div-horizontally

By Keenlio, April 14, 2014