1

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?

Stephen Searles
  • 971
  • 6
  • 18
  • possible duplicate of [css vertical centering](http://stackoverflow.com/questions/527811/css-vertical-centering) – Josh Lee Dec 01 '10 at 03:44
  • Yeah, that was one of the discussions and debates I was talking about. I spent a while there trying to find something to make my code work and it didn't happen, so here I am. – Stephen Searles Dec 01 '10 at 03:51

2 Answers2

2

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!

Stephen Searles
  • 971
  • 6
  • 18
  • Personally, I'm more of a "get things done" type of guy as opposed to a "purest" type. If a table works, then go for it. Quite frankly I'd rather stuff the odd table here and there instead of doing mind gymnastics trying to force a "div/css" solution to work. – NotMe Dec 01 '10 at 03:57
1

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.

andrewk
  • 3,721
  • 4
  • 30
  • 37