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:

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: