What is the least horrible way to center an element with CSS?

http://stackoverflow.com/q/7781014/154877

by Marcel

HTML

<header>
    <h1>Some title thing, who knows</h1>
    <nav>
        <ul>
            <li><a href="one/">One</a></li>
            <li><a href="two/">Two</a></li>
            <li><a href="three/">Three</a></li>
        </ul>
    </nav>
</header>

CSS

body { color:#222; font:13px/1.4 'segoe ui', sans-serif; }
h1 { font:700 2em/1.2 'myriad pro', sans-serif; }
a { color:#06c; } a:hover { color:#39f; }

html, body { margin:0; padding:0; height:100%; background:#eee; }
header { width:30em; background:#fff; }

/*

  With thanks to:
  html5rocks.com/en/tutorials/flexbox/quick/#toc-center

*/
body {
  display:-webkit-box;
  -webkit-box-pack:center;
  -webkit-box-align:center;
  -webkit-box-orient:horizontal;
 
  display:-moz-box;
  -moz-box-pack:center;
  -moz-box-align:center;
  -moz-box-orient:horizontal;
  
  display:box;
  box-pack:center;
  box-align:center;
  box-orient:horizontal;
}