Vertically center in viewport using CSS

Question

I am looking to vertically center a

in the viewport (browser window) without resorting to Javascript (pure HTML and CSS only). I have several const

Answer 1

The easiest way is not to use a div - use a table with one row and one cell. Vertical alignment is woefully unsupported in CSS and you will find yourself coding up the wall and across the ceiling to accomplish it.

I understand the semantic argument against what I have just proposed - I am a proponent of semantic markup in most cases. However I also believe in using the right tool for the right job. I believe it is best to sacrifice a little purity in this case for a simple solution that will work.