Center a Document With a Fixed Width Layout Using CSS

Fixed width layouts can be hard to center with some of the popular browsers out there, but it is possible, with only a few lines of code.

Here's How

1. Create a new web page with a CSS stylesheet 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 stylesheet.
9. Test your work in several web browsers.

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