Vertically centered/aligned layouts, Part I: Fixed height

I frequently find I want to make a layout which site comfortably in the centre of the screen for error pages, holding pages and pages which I just like to be centered.

More frequently I like to take walks outside. Whether I can rip myself away from the internet is a completely different matter.

My frequent yearning aside though I came across this solution which validates and works in all the major browsers (Chrome, FireFox, IE6, IE7, IE8 & Safari).

The only downside is that it requires a fixed height – in the example’s case I chose 200px. Because I could.

Am still working on a flexible height solution (a possible starting/finishing point can be found in this article at VDot media.

The “live example” can be found at lukearl.com/demos/xhtml.1.vertically-centered.html. Just check the source code for style & HTML gubbins.

I can’t remember where I first came across this solution but if anyone recognises it then please leave a note. It’s good to attribute. :)