Centering content using CSS

Posted on June 28th, 2006 by Alex in CSS Tips and Tricks

This is an often asked question:

How do I center stuff on my website without using tables?

The answer is amazingly simple. It also validates as correct CSS, and best part of all… it doesn’t use tables!
Here is the CSS:

body {
  /* We'll make sure IE centers the stuff properly. */
  text-align : center;
}

#wrapper {
  /* We'll center the content for all other GOOD browsers.
      IE doesn't center properly with this. */
  margin : 0 auto;
  width : 50%;
}

Here is the HTML:

<body>
  <div id="wrapper">
    <!-- Put all your centered content here! -->
  </div>
</body>