Centralizar divs vertical e horizontalmente

Categoria: Programação

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) exemplificando 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. Logo abaixo, mostro como ficaria o CSS.

/*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%;
<div style="display: none"><a href='http://best-computer-softwaree.com/' title='software computer'>software computer</a></div>   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 indefinida, seria algo na estrutura div#table > div#cell > div#conteudo > conteúdo…

Caso encontrem algum bug ou isto 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

zp8497586rq

Sobre o Autor
Junior Moro em Campo Grande, Mato Grosso do Sul e sou programador na dothCom.
Posts Relacionados
Comentários