Center a div in ie7 and ie8

Question

I would like to simply center a div in the middle of the window. Currently using

 .notSupported { display: block; position: fixed; top: 0; bottom: 0; left: 0; right: 0; max-width: 500px; max-height: 200px; margin: auto; background-color: #f3f3f3; z-index: 1000; text-align: center; } 

 <div class="notSupported">Your browser is not supported</div> 

In ie7 it results in the div appearing top left corner and in ie8 center top.

Answer 1

 html, body { height: 100%; } #wrapper { position: relative; width: 100%; height: 100%; display: table; } #middle { display: table-cell; vertical-align: middle; text-align: center; } /* for IE7 and below */ #middle { *position: absolute; *top: 50%; *width: 100%; *text-align: center; } #center { *position: relative; *top: -50%; } 

 <div id="wrapper"> <div id="middle"> <div id="center">Center me !</div> </div> </div> 

Answer 2

Block doesn't work in IE7.

You have to use zoom:1 and block as a hack or without hack from a different css only for ie7.

.notSupported {
    display: block;
    *display: block;
    *zoom:1;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 500px;
    max-height: 200px;
    margin: auto;
    background-color: #f3f3f3;
    z-index: 1000;
    text-align: center;
    width:200px;
    height:50px;
}