Como centralizar uma DIV com CSS



Ainda surgem dúvidas quanto a essa questão: "Como centralizo minha div com css para que dê certo em todos os navagadores??"
Essa perguntinha fica martelando na cabeça de quem está começando com HTML/CSS, mas temos a solução!!
Veja abaixo, é tiro e queda e funciona em todos os nabegadores atuais, até no temido IE6...
Dúvidas? Posem nos comentários.... abraço a todos!


Bom, primeiramente vamos entender a teoria:

Afaste o objeto 50% do topo e da lateral esquerda. Feito isso recue a margem (topo e lateral esquerda) em metade de seu tamanho.
Confuso? Vamos à prática:
Supondo que você tenha uma div principal nesse exemplo denominada de geral, onde todos os objetos estarão dentro dela:

#geral {
position:absolute;
top:50%;
left:50%;
width:500px;
height:300px;
margin-left:-250px;
margin-top:-150px;
text-align:center;
}
O comprimento (width) e a altura (height) são variáveis, depende do tamanho da sua página. Deve-se ficar atento que em margin-left e margin-top é metade do valor negativo.
IMPORTANTE: Recebi vários e-mails de pessoas dizendo que o código margin:0 auto realiza a mesma função do que o código que descrevemos a cima. Mas lembrando que o margin:0 auto centraliza a página apenas horizontalmente. Já o código que vimos à cima centraliza tanto horizontalmente como verticalmente.

Aplicação:

<html>
<head>
<style>
#geral {
position:absolute;
top:50%;
left:50%;
width:500px;
height:300px;
margin-left:-250px;
margin-top:-150px;
text-align:center;
}
</style>
<body>
<div id="geral">TESTE</div>
</body>
</html>

Fonte: Sonaweb.com.br 

7 comentários:

  1. Excelente dica. Deu certo e me ajudou muito.
    Obrigada!

    ResponderExcluir
    Respostas
    1. E como eu coloco uma borda nessa div para que todo o conteudo fique dentro da borda.

      Excluir
    2. dentro do das chaves da id da div vc coloca (border: 2px solid blue)
      no caso coloquei uma expressura de 2px, coloquei para ficar com cor solida o solid e atribui uma cor chamada blue que seria azul. Espero ter ajudado!

      Excluir





























































































  2. O.o































































































































































































































































































    oi






























































































    O.o































































































































































































































































































    oi






























































































    O.o





























































































































































































































































































































































































    O.o































































































































































































































































































    kkk
    oii

    ResponderExcluir