This method works on all the new browsers and most old browsers.
<html> <head> <title>Centering a page layout with CSS</title> <style type="text/css"> <!-- body { text-align: center; min-width: 980px; } #wrapper { width: 960px; margin: 0 auto; text-align: left; } --> </style> </head> <body> <div id="wrapper"> <h1>The Gettysburg Address</h1> <h2>Gettysburg, Pennsylvania<br>November 19, 1863</h2> Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal. Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. </div> </body> </html>
The wrapper sets the width of the webpage to 960px, centers
everything but left-justifies the text. The margin:0 auto centers
everything.
Note that body tag in CSS must come before #wrapper.
Some browsers break when browser width is less than wrapper width;
hence the min-width in body.
I did not use a DOCTYPE (for code simplification) but highly
recommend using one.