This is a revamp of a tutorial I wrote years ago for my old blog (I think maybe 2006/7?)
This is the most effective way that I’ve found to center layouts. There are other ways, but this is the most simple. I’m going to assume that you have a basic knowledge of CSS, including selecting classes and IDs.
Firstly you need to create a container div and give it an id:
<div id="container"> </div>
This container will sit just inside the <body> tag and will contain all of your layout markup. For example:
<body>
<div id="container">
<p>this is your content!</p>
</div>
</body>
Next, in your stylesheet you need to align your text to center. We’ll do this on the body tag.
body {
text-align:center;
}
Next, select the ID that you created above. In this case it was id="container". Give that container a width (it can be any number):
#container {
width:800px;
}
Not too different from what you’d normally do, the trick is adding the margin values:
#container {
width:800px;
margin:0px auto;
}
This is telling the browser to make the top and bottom margins on the div 0 and for the left and right margins, make them auto. The auto allows the browser to calculate the margins on the side for you so it doesn’t matter what size the window is. You can also change the 0px value to anything you want.
The final thing you might want to do is stop all of the text inside the div from being centered. This is easily fixed by added a text-align to the div style itself, like so:
#container {
width:800px;
margin:0px auto;
text-align:left;
}
Hope it all makes sense! Please leave a comment if you have any questions 