Luan Garcia » xhtml, css, jquery e webstandards

Fala ae galera! Como estou em um momento inspirado, resolvi fazer um post simples mas que ainda é a dúvida de muitos desenvolvedores.

Todos já sabem que para centralizar horizontalmente qualquer elemento, o mais apropriado é usar margin: 0 auto; (para elementos que possuirem uma largura fixa) e pronto, seu elemento estará centralizado.

Porém, centralizar horizontalmente é moleza, todos ja sabem. E centralizar verticalmente? É isso que vamos ver agora.

Antes de tudo, vamos deixar claro uma coisa: o elemento deve possuir uma altura fixa (senão voce só consegue realizar isso via js), e js não é nosso foco no momento.

Primeiramente, vamos montar uma estrutura simples, uma div com a classe class=”centralizar”. E para visualizar nosso bloco, colocaremos no css o seguinte codigo. Vendo no browser, aparecerá um quadrado vermelho.

HTML:
<div class="centralizar">
Algum conteudo.</div>

CSS:
.centralizar {
background-color: red;
width: 300px;
height: 400px;
}

Beleza, bacana, mas ainda não está do jeito que queremos. Então vamos ao que interessa. Para centralizar esta div primeiramente precisamos dizer que ela tem um position: absolute;. Em seguida, temos que atribuir top:50%; e left:50%;. Nosso código ficará assim:

CSS:
.centralizar {
background-color: red;
width: 300px;
height: 200px;
position: absolute;
top:50%;
left: 50%;
}

Como já era de se esperar, nossa div ficou torta, nao ficou centralizada. Mas isso é óbvio, pois ainda não terminamos . Agora então, vamos para o pulo do gato.

Metade do caminho andado, agora temos que fazer o seguinte: “atribuir margin top e margin left negativos, com metade da altura e da largura.”.

Hã? Quem? Cuma? Calma, calma… vamos por partes. Temos que pegar a metade da altura total da div(150px) e atribuir esse valor ao margin top, porem, negativo. E o meso vale para a largura. Pega-se a metade da largura total da div(200px) e atribui esse valor a margin-left, porém, negativa tb. E assim ficará nosso código:

CSS:
.centralizar {
background-color: red;
width: 300px;
height: 200px;
position: absolute;
top:50%;
left: 50%;
margin-top: -100px;/* centraliza a div verticalmente */
margin-left: -150px;/* centraliza a div horizontalmente */}

E é isso galera, nossa centralização está pronta. E ainda aprendemos a centralizar horizontalmente de outra forma: com position. Para vizualizar este exemplo clique aqui e baixe o arquivo.

Vlw galera até a próxima!