How to centre content on your pages using simple cascading stylesheets

We have all see those rather nice looking pages that have their content in the middle with equal vertical borders at each side. So how are they done?

The easy way is CSS, cascading stylesheets. Here's a simple worked example as a starter.

The idea behind CSS is that it separates the content of web pages from the way that they are presented. That's rather like using styles in a word processor. In essence you have two files, one that is what goes on the page, the html, and the other that contains the stylesheets.

Stylesheets usually have the file extension .css.

Here's part of a screenshot of the page we're going to produce, for clarity a border is added. (Produced using Firefox 1.5)

CSS centering of content

The two parts that go to make up this simple example.

First the html:

The line <link href="/guides/sample_styles/sample.css" rel="stylesheet" type="text/css" />
is used to link the file containing the stylesheets to the html file, an alternative is to embed the stylesheet within the html. That's fine if you only have one file, but as soon as you want to use the same styles for more than one page you loose all the benefits of putting the styles in one place if you have to embed them in every file. You're also storing up trouble for yourself in the future when you want to edit the styles. Put them into a separate file so you only have to maintain them in one place.

The styles:

What the styles do.

/* stylesheet to centre a page */ is a comment, enclosed in /* */ brackets

div#container {
width: 640px;
margin: auto;
}

This defines a division with the name container, it has a width of 640 pixels, and from our requirement to centre the content within the page, it has automatic margins. The effect of that is to put the division (content container) in the centre of the page with equal margins on either side.

What is looks like

CSS centering of content

That looks reasonable, but there is a large margin between the text and the top edge of the division, and at the left-hand side the text is positioned right up against the edge. The text can be 'pulled up' by reducing the top-margin of the paragraph to zero, this is done by adding another rule to the stylesheet, as follows.

.noTopMargin {
margin-top: 0;
}

This rule is a 'class' because its name begins with a . (period or full stop), that means that it can be applied to any tag. So now we can apply it to the first paragraph as :

<p class="noTopMargin">Here is some sample content - it should be centred on the page. The dashed border is added to show the outline of the division, this line is longer so that it wraps around and fills the division more.</p>

The page now looks like this:

top-margin zero applied to top paragraph

Putting it all together

Here's a link that reloads this page, with the css we've just been discussing, as you'll see the content is centred. I've removed the dotted border too.

Go back to the previous layout. | Back to guides index