I have html that looks like this:

<!DOCTYPE html> <head> <meta charset="utf-8"> <!--[if lte IE 8]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <header> <h1>Some title thing, who knows</h1> <nav> <ul> <li><a href="one/">One</a></li> <li><a href="two/">Two</a></li> <li><a href="three/">Three</a></li> </ul> </nav> </header> </body> </html>

If I give header an auto margin and a width, it's horizontally centered. What's the least horrible way to ensure that it's vertically centered, as well?

I am aware of the following articles which provide some discussion of the topic: