This isn’t great and seems a little bit hacky. So I did some research and found a couple of solutions (solution one, solution two). These have been around for a long time, I guess I must have just missed them?!
These both work, although the second is slightly more solid than the first. In at attempt to understand them further I made a demo page or each method, which should explain how they work.
Absolute positioned div
The first example based on Hicksdesign’s solution uses a div positioned 50% down the page with a negative bottom margin, set to half the height of the element you want to center. The second uses the same technique but with only one element.
The problem with both these methods is that content is lost at the top of the element if you make the browser window too small.
This example based on d-graff’s idea uses a floated div with a height of 50% and again a negative bottom margin, set to half the height of the element you want to center. The content is then set to clear the floated element.
This seems to be more solid as it works nicely with scroll bars.