CODEWITHSUNDEEP
htmlcss
Stephen Searles
Stephen Searles

Reputation: 981

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?

Upvotes: 1

Views: 94

Answers (2)

Stephen Searles
Stephen Searles

Reputation: 981

I came up with a solution:

<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>

Upvotes: 2

andrewk
andrewk

Reputation: 3871

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.

Upvotes: 1

Related Questions