Center a website using CSS

Women working at the Portland Woolen Mills

You built a great website layout which is 960px wide, and you want to centre (center for EN-US) the website using CSS instead of the dreaded <center> tag. CSS makes this really simple.

Starting with the HTML we have a div which is called wrapper which contains all the content.
[cc lang=”HTML”]

All of my content goes here


The CSS is used to centre the content.
[cc lang=”CSS”]
//first get rid of the padding and margin for the body

width:960px; //sets the width of the div, is required
margin: 0 auto; //sets the top and bottom to 0 and left and right to even hence the centre

One comment

  1. If I remember correctly, IE7/6 doesn’t support “Margin:0 auto”. Instead of using that, you will have to use “text-align:center” on a div that can wrap around the #wrapper.

    So basically:

    #iefix {
    #wrapper {
    margin:0 auto;

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s