This design is centred (left–right) in the browser window, but the content area is still never wider than 600px. Still, the fact that it remains centred rather than sitting to the left of the browser window no matter what size the window is makes the page much more appealing than the straightforward rigid design.

Centring the content on the page is such an improvement that many designers have done it — or in some cases tried to do it — for years, using many different techniques. One of the first was the non-standard <center> element introduced (if I recall correctly) by Netscape. What this did — or rather, what it was supposed to do — was centre-align everything it contained. It was, effectively, a shorthand way of writing <div align="center">. The problem with this approach was that some elements would not centre, and exactly which would or would not had less to do with the standards (from which you might expect block elements would not centre and inline ones would) than how the browser in question chose to interpret the instruction.

When designers started using tables to build layouts they found that it was easy to centre page content using nested tables:

<table border="0" width="100%" 
height="100%">
<tr>
<td align="center">
<!— 
this cell contains the table which 
holds all the page's content
—>
 <table border="0" width="600px">
  <tr>
   <td>et cetera...

   ...</td>
  </tr>
 </table>
</td>
</tr>
</table>

The main problem with this was not that it used HTML for control the appearance of the page (though it did) or that it used non-standard markup (though it did), it was that building pages with nested tables (and it rarely stopped at two) very rapidly became extremely complex. Even if the designer(s) were fastidious about commenting their markup, maintaining the page was not a simple task. It was even more difficult if the design neaded a tweak some time after its initial construction. Table-built layouts are high-maintenance, but they do have the advantage of actually working. Most of the time. In graphical browsers, anyway.

The arrival of CSS positioning — the vast majority of Web users use a browser which can handle CSS-P to some extent at least — means that complex designs can be built without complex markup: maintaining and adjusting the design is much, much easier. Centring the page content, should you want to do it, is more tricky. The <center> element is not part of the HTML standard and <div align="center"> is deprecated — the move is towards non-presentational use of HTML, remember? An acceptable equivalent would be to appy a style rule to an element — <div style="text-align: center;">. This will, however, only centre inline elements. This will not work:

<div style="width:100%;text-align:center;">
 <div id="contentarea" style="width: 600px;">
  ...
 </div>
</div>

It is even more tricky if you want to centre something vertically as well as horizontally. The CSS equivalent of the valign="middle" attribute which could be used in <td> tags would be vertical-align: middle; — but, again, this will only work on inline elements and browser support for it is patchy.

However, using CSS it is possible to centre page elements horizontally and vertically — provided you know the width and height of the object concerned. This does not have to be in terms of absolute length: the technique works just as well using percentage lengths. This page has an element <div id="content"> which contains every bit of the page's contents. To centre it horizontally, set left to 50% and apply a negative margin-left value of half the element width (remember this needs to include the width of any borders and padding):

 #content {
  position: absolute;
  left: 50%;
  width: 590px;
  margin-left: -296px;
 }

Apply the same approach to top and margin-top and you can absolutely centre an element in the browser window.
 

Back to article