UltraMega Blog
3Apr/090

How To Center a Page With CSS

When designing the layout of a web page, it is common to want to center the entire page. Luckily, this is very easy to do without breaking standards. All you have to do is wrap the entire page with a div with the left and right margins set to auto (margin: 0px auto;).

Here is an example:

<html>
<body>
<div class="wrapper">Contents of page...</div>
</body>
</html>
.wrapper {
   margin: 0px auto;
   width: 600px;
}

Here, margin specifies the top/bottom and the left/right respectively.

That's all there is to it!