Smartlab Software logo

Center a Webpage using CSS

This method works on all the new browsers and most old browsers.

The CSS

<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>

Analysis

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.