Vertical Centering in IE

Related Ads

Why is it that CSS makes everything so incredibly difficult? All I wanted to do was vertically center a div in another div. I wanted it to work like the valign attribute td elements in HTML tables, but noooo...

Firefox (and probably other standard-compliant browsers) make this easy, if not at all intuitive. For these browsers, you can tell the browser to treat your div element like a table element and then you can tell it to vertical-align center and all is good. This works like so:

  <div style="height: 600px; display: table;">
    <div style="display: table-cell; vertical-align: middle;">
      <div>
        Stuff to center.
      </div>
    </div>
  </div>

But, for some reason, IE doesn't do this, so you have to hack it in. The #foo is a hack that IE will interpret but Firefox (and other browsers) will ignore. This then becomes:

  <div style="height: 600px; display: table; #position: relative; overflow: hidden;">
    <div style="display: table-cell; vertical-align: middle; #position: absolute; #top: 50%;">
      <div style="#position: relative; #top: -50%">
        Stuff to center.
      </div>
    </div>
  </div>