Há algum tempo postei sobre como centralizar verticalmente e horizontalmente usando CSS, o que gerou alguns posts de visitantes revoltados porque não funcionava no IE7, fato que na época eu não tinha testado para essa versão do IE.

Então, mesmo depois de muito tempo da versão já lançada, deixo um novo post testados nos browsers Firefox 2, IE6, IE7 e Opera 9.

html, body {
width:100%;
height:100%;
padding: 0px;
margin: 0px;
}

#table {
width: 100%;
height: 100%;
position: static;
display: table;
*overflow: hidden; /* hack para o IE6 e IE7 */
*position: relative; /* hack para o IE6 e IE7 */
}

#cell {
vertical-align: middle;
display: table-cell;
position: static;
*top: 50%; /* hack para o IE6 e IE7 */
*position: absolute; /* hack para o IE6 e IE7 */
}

#conteudo {
top: -50%;
width: 500px;
margin: auto;
position: relative;
background: red;
}

link para o outro post e comentários

Um atributo muito interessante quem tem na propriedade position é o fixed. Com ele você pode posicionar um objeto no palco (como se fosse absolute) só que ele sempre estará na “mesma posição”, mesmo rolando a tela. Infelizmente o IE (até o 6) não reconhece esse atributo, mas antes de sairmos tentando bolar um código [...]

Uma grande dúvida que sempre surge é como centralizar um elemento no HTML, tanto verticalmente quanto horizontalmente, usando CSS. Há duas maneiras de se fazer isso sem muito trabalho. A primeira consiste em definir a posição do objeto como absolute e suas posições top e left com 50% e tirando a diferença (subtraindo) da metade [...]