Como centralizar uma div com css em modos relative, static, absolute, fixed.



Muitas dúvidas suergem quando começamos a aprender CSS, principalmente em relação às DIV's. Como centralizar uma div com CSS para que funcione corretamente em todos os navegadores sem dor de cabeça??

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!

Já havia feito um post sobre esse assunto:
  • Como centralizar uma div com CSS   


     Mas nesse post vou mostrar as diferenças de centralização utilizado modos diferentes de position, bons estudos.




  • <!-- Centralição nos modos "relative" e "static" -->
     
    <style type="text/css">
    /* diferente do modo "absolute" centralização só ocorre na horizontal "X" pois no modo "relative" e "static" a div acompanham o fluxo da pagina faça um teste desabilitando o comentário da tag "p" abaixo */
    #divQuadrada 
    {
    position:relative;
    width:200px;
    height:200px;
    background-color: #333333;
    /* margin com o valor de auto é a responsável pela centralização somente nos modos relative e static */
    margin: auto;
    }
    body
    {
    background-color: #CCC;
    margin: 0px 0px 0px 0px;
    }
    </style>
     
     
    <!-- Centralição nos modos "absolute" e "fixed" -->
     
    <style type="text/css">
    /* Nos modos "absolute" e "fixed" centralização ocorre na horizontal "X" e vertical "Y" ignorando o fluxo da página, teste removendo os comentários da tag "p" abaixo. */
    #divQuadrada 
    {
    position:fixed;
    /* left em 50% posiciona a div pelo canto esquerdo no meio da página */
    left:50%;
    /* top em 50% posiciona a div pelo topo no meio da página */
    top:50%;
    width:200px;
    height:200px;
    background-color: #333333;
    /* como a div fica alinhada pelo canto superior esquerdo no centro da página devemos subtrair através da propriedade margin metade do seu tamanho como realizado abaixo. */
    margin-left: -100px;
    margin-top: -100px;
    }
    body 
    {
    background-color: #CCC;
    margin: 0px 0px 0px 0px;
    }
    </style>
     
    <!-- tag&#039;s em html utilizada nos exemplos acima -->
     
    <!-- <p>conteudo do seu site</p> -->
    <!-- <p>conteudo do seu site</p> -->
    <!-- <p>conteudo do seu site</p> -->
    <!-- <p>conteudo do seu site</p> -->
    <!-- <p>conteudo do seu site</p> -->
    <!-- <p>conteudo do seu site</p> -->
    <div id="divQuadrada"></div>

4 comentários:

  1. Valeu! Ajudo pa carai o centralizamento de div com absolute! Fazia com JQuery antes... kk

    ResponderExcluir
  2. Valeu cara! Se não fosse vc meu site nunca ia ter nav bar, pq eu ia desistir de tentar alinhar ela no meio

    ResponderExcluir
  3. Porém, no IE não funciona cara.

    ResponderExcluir
    Respostas
    1. NADA funciona no IE, a primeira coisa que eu faço quando instalo o windows é desabilitar esse lixo!

      Excluir