Muitas pessoas ainda encontram problemas para centralizar divs, principalmente na vertical. Também questionam se o vertical-align:middle funciona, do uso de valores negativos para a webstandards, padrões W3C. Não vou entrar no mérito para dizer o que está certo, qual é mais bonito ou semanticamente correto.

Neste post vou mostrar como centralizar uma div (ou qualquer outro elemento). Com dois casos, o primeiro e mais fácil com altura fixa e o segundo sem altura definida (altura depende do conteúdo).

Para elementos com altura fixa, basta usar posicionamento absoluto, definir o top e left com 50% e puxar negativamente a metade da largura/altura. Seu elemento de altura fixa estará centralizado.

Já para elementos sem altura definida você pode usar o display:table, vertical-align: middle, abaixo mostro como ficaria o CSS.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

/*COM ALTURA FIXA*/
.centralizado{
   width: 500px;
   height: 200px;
   top: 50%;
   left: 50%;
   margin-top: -100px;
   margin-left: -250px;
   position: absolute;
}
 
/*SEM ALTURA FIXA*/
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;
   border:#F00 dotted 1px;
   padding:10px;
   font:12px "Trebuchet MS", Arial, Helvetica, sans-serif;
}

Para altura fixa basta colocar o elemento dentro da tag body ou dentro de um elemento com position:relative, lembrando que neste caso será centralizado dentro deste elemento pai.

Já o HTML para altura indefinda, seria algo na estrutura div#table > div#cell > div#conteudo > conteúdo…

Caso encontrem algum bug, não funcione em algum navegador, queiram criticar ou elogiar sintam-se livres para comentarem, espero ter ajudado.

Solução para altura indefinida encontrada no site do Rogério Lino
Exemplo