What is a straightforward solution to vertically centering on a webpage?

I've seen a lot of discussion and debate on this with solutions from pure CSS to pure HTML. They can get pretty complicated, nesting divs within divs, using some pretty intense looking CSS. I figured I'd 开发者_高级运维ask though, because I need a straightforward solution to this problem, and it needs to not rely on CSS tables (i.e. {display:table;} because I'm using that to show/hide the entire div and solutions using that never seem to work nicely with my other code. So how should I do this?

I came up with a solution. I'm not sure it's the best or most compatible, but here it is:

<style type="text/css">
  table.center {
    width: 100%;
    height: 100%;
  }
  h1.center {
    text-align: center;
  }
</style>

<div id="hide-able">
  <table class="center">
    <tr><td><h1 class="center">I'm centered!</h1></td></tr>
  </table>
</div>

If you have a better solution, please share!

you can have your outer div #wrapper{margin:0 auto;width:900px}

that gets it done nicely. make sure to include doc-type for IE.