Centring

Centring something horizontally and vertically with respect to the viewport using strict HTML4 (or a generic XML vocabulary) and CSS2 is not as obvious as it could be. In fact, to do this you have to use both fixed positioning and table layout.

First, mark up your content using structural HTML. For example, if you are going to be centering a header and a paragraph, your markup could look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html lang="en">
 <head>
  <title>Demo 1</title>
  <style type="text/css">
   /* we will put the stylesheet here */
  </style>
 </head>
 <body>
  <div>
   <h1>Demonstration</h1>
   <p>This is the first demonstration</p>
  </div>
 </body>
</html>

Note that we wrapped the markup you wish to centre in a div. This is required because we need two elements for our CSS-fu, and we can't use the html element because the root element can't be positioned in CSS2.

The only block-level container in CSS2 that can be vertically centred is a table cell, so we are going to need to make the inner most container of your markup a table cell. The inner most container is the div element, and to make that a table cell we just need the following CSS:

 div { display: table-cell; }

To centre it, we use the vertical-align property. Table cells automatically grow to fit their contents, so we don't have to worry about height or width.

 div { vertical-align: middle; }

Now we need to say what to center it in, and this has got to be a table row, and in fact must be a table row which has the height of the viewport. This is so that the cell is centred relative to the right area. The div's container is the body element, and to make it a table row fixed to the viewport takes the following CSS:

 body { display: table-row; position: fixed; top: 0; left: 0; right: 0; bottom: 0; }

We also need to make it horizontally centred (it's width will automatically size to the width of the cell), and to do that we use auto margins:

 body { margin: auto; }

The net result is Demo 1. As far as I am aware, that is technically correct.

Unfortunately, it doesn't work in any browser as far as I am aware. Here is one that works in Mozilla. Here's one that works better in Mozilla.