Use CSS to Center a Document with a Fixed Width Layout

Here's How:

1. Create a new Web page with a CSS style sheet in your HTML editor.
2. Create a div element as the main element on the page where you'll store everything on the page.

3. Give that div element an ID that is unique on the page.

4. Open your CSS style sheet and set the width of your div element.

   div#main {
     width: 750px;
   }

5. Add automatic margins to center your div.

   div#main {
     width: 750px;
     margin-left: auto;
     margin-right: auto
   }

6. To fix it for Netscape 4, and IE 4 - 6(quirks mode) add a text-align on the body.

   body {
   text-align: center;
   }

7. But then all the text inside is centered, so re-align the text in your #main div by adding text-align: left; in there.

   div#main {
     width: 750px;
     margin-left: auto;
     margin-right: auto;
     text-align: left;
   }

8. Save your page and your style sheet.
9. Test in several Web browsers.

Tips:

1. This will center the layout box but not the content within it. Use text-align to center the inner content.