In CSS, it seems it's next to impossible to centre something vertically in the viewport (the bit with the scroll bars). I found this method on the net, and this is the render test of it. It relies on the height of the box being centred being known, and will not work with dynamically resizing elements.

First, the exact centre of the screen is found:

div {
position: absolute;
top: 50%;
left: 50%;
}

Next, the height and width of the containing element is established:

div {
height: 400px;
width: 400px;
}

And finally, the whole box is displaced half of it's height and width by using negative margins:

margin-left: -200px;
/* there seems to be an inequality in the top and bottom space around this box.
I've split the difference between Gekko and IE */
margin-top: -210px;
}