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. :)