I was playing around with CSS today, building a site for a client of my friend Jamie. He’s a graphic designer, so did the design, and it’s up to me to tarnslate it into code, preferably using the latest techniques.

One of the things the design called for was a centred layout. That, it would seem, is easier than I thought. Here’s how I did it…

First of all, in your HTML create yourself a wrapper div to hold your page content

<div id=”wrapper”>content goes here</div>

Then use the id to style it with CSS

width: 800px;
height: 520px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -260px;
margin-left: -400px;

The key point here is that you’re actually setting the div to start in the centre of the page, and then using the margins to push it back so that your content is centred on the page. Your margin top/left settings should always be HALF the width/height values.

You’ll also see that values have to be in pixels.

So there you go. A horizontally and vertically centred webpage. The best thing about this technique is it’s cross browser compatible. It works in IE, Firefox, Opera, Safari and Flock!