CSS: Centralizar Horizontal e Vertical

Ver post no novo domínio: http://rogeriolino.com/2007/01/17/css-centralizar-horizontal-e-vertical/

Uma grande dúvida que sempre surge é como centralizar um elemento no HTML, tanto verticalmente quanto horizontalmente, usando CSS.

Há duas maneiras de se fazer isso sem muito trabalho.

A primeira consiste em definir a posição do objeto como absolute e suas posições top e left com 50% e tirando a diferença (subtraindo) da metade de sua altura e metade de sua largura na margem. Por exemplo se um elemento tem 500px de largura e 400px de altura na margem vai ter um valor negativo (para top e left) igual a metade destes valores:

#minhaDiv {
width: 500px;
height: 400px;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -250px;
position: absolute;
border: 1px solid black;
}

ou resumindo: margin: -200px auto auto -250px;

Pronto sua div vai ficar centralizada na janela. Mas temos um problema com isso.

Nesse caso sabemos o valor da altura do objeto, então tiramos a diferença na margem. Mas e se tivessemos um objeto em que sua altura pode variar (ou seja não sabemos o valor da altura) ?

Podemos solucionar isso usando o vertical-align, mas para ele funcionar temos que definir o display da div como table. A má notícia é que o nosso amigo IE não reconhece essa propriedade (e nem o valor table como display). A boa notícia que usando um hack para o IE dá pra acertar isso.

A estrutura para simular uma tabela fica assim:

<div id="tabela">

        <div id="cell">

                <div id="conteudo">

                       <p>parágrafo</p>
                </div>

         </div>

</div>

E definimos no CSS o display da div tabela como table e da div cell como table-cell. Mas antes temos que acertar o html, body e a tabela para 100% (largura e altura).

html, body {
width: 100%;
height: 100%;
margin: 0px; /* retirando a margem padrão */
padding: 0px; /* retirando o padding padrão */
}

#table {
width: 100%;
height: 100%;
display: table;
}

#cell { display: table-cell; }

Com as divs já funcionando como tabela vamos definir a vertical-align como middle, isso na div cell.

#cell {
vertical-align: middle;
display: table-cell;
}

Falta agora setar a margin do conteudo como auto. E colocar um valor para largura, senão vai ficar 100%.

#conteudo {
width: 500px;
margin: auto;
}

Pronto, a div já vai aparecer centralizada no browser. Mas ainda está faltando o nosso amigo IE.

A idéia é quase a mesma da primeira situação. Como antes do conteudo temos uma div (cell), a gente defini seu position como absolute, e top como 50%. E na conteudo com position como relative, e top como -50%.

Lembrando que para não atrapalhar a definição correta, usaremos um hack que só influenciará no Internet Explorer.

Ficando o CSS final assim:

html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}

#table {
width: 100%;
height: 100%;
display: table;
background: #f1f1f1;
}

#cell {
vertical-align: middle;
display: table-cell;
_position: absolute;
_top:
50%;
}

#conteudo {
width: 500px;
margin: auto;
padding: 20px;
border: 1px solid black;
_position: relative;
_top:
-50%;
}

E o HTML:

<div id=”table”>
<div id=”cell”>
<div id=”conteudo”>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>
</div>

Mais sobre:

Exemplo com a primeira situação

Maujor – Centralizar Vertical

[update testado=”IE6, IE7, FIREFOX 2 e OPERA 9″]

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;
background: red;
}

[/update]

57 thoughts on “CSS: Centralizar Horizontal e Vertical

  1. Enzo

    No IE, a altura da DIV cell faz com que se crie uma scrollbar, pois usa altura excede o navegador… Que fiz de errado?

    #cell {
    vertical-align: middle;
    display: table-cell;
    _position:absolute;
    _top:50%;
    }

    Responder
  2. Icone

    Olá,
    O problema é o seguinte, tô trabalhando com iframe, pra facilitar a manutenção, o index é uma tabela onde o iframe principal chama os arquivos .swf
    Quando a visualização é 800X600 blza! Mas quando ajusta pra uma maior, ele permanece pequeno.
    O que posso fazer para melhorar isso? Ou seja, adaptar a página ao tamanho de vizualização do visitante.
    Muito obrigado pela atenção.

    Responder
    1. Roberto Halluli

      use os itens..que estao marcados como /hack para ie6 ie7

      ou melhor abandona esse navegador..
      é o mais lixo de todos..

      Responder
  3. Fabio Fermo

    Eu tenho um jeito mais fácil.

    Se eu preciso colocar um conteúdo centralizado na tela com barras na lateral eu coloco divs com largura em porcentagem.

    Ex.:

    1. No XHTML:

    Conteúdo

    2. E depois no CSS

    #esquerda {width:5%;}
    #conteudo {width:90%;}
    #direita {width:5%;}

    E pronto ele centraliza certinho. Eu acho mais fácil.

    Responder
  4. Pingback: Blog HotSync » Dica de blog

  5. Joe

    Entaum meu amigu blz, entaum esse codigo naum adiantou nadam, naum solucionou o meu prob, pois esta totalmente errado isso e uma gambiarra do caccete q vc fez eu quero, e se eu quiser definir um tamanho pra minha DIV o q faço,… entendeu… o negocio tem q ser auto entendeu o negocio tem q usar table pra dar certo

    ta vendo essa bosta de css so veio pra encher o saco em nossas vidas…
    mas tudo bem

    Responder
  6. Gabriel Falcão

    Que tal assim?

    #super_corpo{
    left:50%;
    position:absolute;
    width:400px;
    height:500px;
    }
    #corpo{
    position:relative;
    left:-50%;
    width:100%;
    height:100%;
    }

    E no html:

    AQUI VEM TODO O SEU CONTEUDO

    Responder
  7. Rogério Alencar Lino Filho Post author

    Querido Guto,

    O que é WebStandards para você ?

    Então quer dizer que não podemos fazer image-replacement utilizando overflow com número negativo, só porque não seria um número válido na WebStandards?!

    Claro que concordo que é uma gambiarra, como por infelicidade temos que utilizar em outros casos (como nos hacks, conhece?).

    É só uma maneira de se obter o tão questionado alinhamento. Como há outras maneiras já comentadas aqui nos próprios comentários do post.

    Abraços.

    Responder
  8. Pingback: CSS: Centralizar Horizontal e Vertical #2 « Rogério Lino

  9. Pingback: jQuery Center plugin em Webpoint - Weblosofia com CSS, Jquery, Javascript, Ajax, PHP etc.

  10. Rúbia

    Olá Rogério, td bem? gosto bastante do seu site🙂

    Mas eu tenho uma dúvida muito chata com relação a um div q tenho, onde existe ul e li dentro.

    O ul parece q automaticamente já fica à esquerda, mas eu preciso q ele fique no centro.

    Essa lista representa uma paginação, e ela realmente tem q ser centraçozada… ela não tem largura fixa.

    Como vc faria?

    Responder
  11. Edson

    opa
    retiro meu comentário anterior… não havia visto o update.
    Outra coisa… se copiar o codigo e colar no dreamweaver ou Expression Web, tem que redigitar as “áspas” pois ele copia errado… sei lá…🙂

    Responder
  12. Drausio

    To aprendendo CSS por apostikas na net, e para centralizar fiz o seguinte:

    CSS:
    #exemplo {
    width: 600px;
    height: auto;
    margin: 0 auto;
    }

    A DIV ficou centralizada…
    porém, alguém sabe se isso da problema em algum navegador? (utilizo MAC e não testei nem no FireFox nem no IE, só Opera e Safari, e funcionou.)

    Responder
  13. Alexandre

    Muito bom. Solucionou grande parte dos meus problemas. Se puder ajudar de alguma forma por favor entre em contato. A tempo, gostei da resposta dada acima a respeito da Webstandards.

    Abraço!

    Responder
  14. Pingback: Centralizar tela em Silverlight 2.0 « Thiago Couto

  15. Ricardo

    Muito bom seu trabalho de divulgação do conhecimento. Parabéns.

    Mas, tira essa porra de efeito neve que além de ser uma baitolagem prejudica a eficiência da leitura.

    Além disto, este efeito já tá muito manjado.

    Valeu

    Responder
  16. BUH

    olá usei esse alinhamento pra centralizar vertical e horizontal um arquivo em flash funfou so naum testei em todos os navegadores possiveis hahah mass naum sei se por ser flash quando eu diminuo a resolução da tela corta o flash tanto na horizontal como na vertical sei que isso talvez naum tenha haver com o alinhamento da div ou pode ser naum sei mais alguem sabe como solucionar essa questão?

    Responder
  17. Guilherme Franco

    Funciona no FF 3.0, Chrome IE 8….

    E para os tabacudos que estão dizendo que não funciona…. no ctrl+c ctrl+v apaguem e reescrevam as ” (aspas) pq fica com caracter diferente….. di pega beleza

    Responder
  18. Gabriel Bruno

    Obrigado pela postagem me ajudou bastante e funcionou direitinho em todos os browsers. Só sinto uma ferramenta tão utilizada e atual como o css, não tenha uma maneira menos “suja” de centralizar um documento web. Espero que tudo isso seja corrigido. Mas valeu mesmo por este post.

    Responder
  19. André Japones

    Velho, sónão te beijo por 2 motivos:
    1° tu tá longe
    2° num gosto de homem (graças a Deus) e sim de mulher..

    uauahuahauahuaha…
    valeu TRUTA!!!!

    Responder
  20. anderson

    Obrigado por compartilhar esse conhecimento!
    profissionalismo é tudo…que bom se todos os blogs/sites fossem como o seu…
    (mas nada de beijos rsrsrs(coments acima))
    rsrsr
    abraços

    Responder
  21. Pingback: Centralizar tela em Silverlight 2.0 | Thiago Marotta

  22. Roberto Halluli

    Vou dar uma dica pra voces..

    Olha o exeplo do ricardo ali..
    que redireciona pra outra pagina..

    ai ti vai ver div centralizada..
    aumentar diminuir..

    viu isso..
    pronto esta no local certo..

    agora..
    maos a obra..
    botao direito CLIK…
    selecione
    CODIGO FONTE..
    bom..
    ai tu copia o codigo fonte e muda as coisas de la..
    +simples..
    e aqui funcionou..

    abç

    Responder
  23. Blank About Web

    Parabens pelo codigo, infelizmente o IE 7 complica a vida de miuita gente ….rsrsrsr nada como uma boa e velha gambis no código ….o importante é funcionar ….ser auditado num overflow é dificl …hauhauahuah😉 have fun se caso quiser conhecer meu blog …tenho disponibilizado algumas vagas de trabalho por la e postado direto no twitter se interessar a alguem pode acessar ou seguir blog.blankabout.com.br ou @blankabout

    Responder
  24. Aline França

    por favor, to querendo centralizar verticalmente uma imagem que ta dentro de uma div, como faço? já tentei esse css mas não funcionou, pq deve ter a ver com o tamanho. o tamanho da imagem não é definido

    Responder
  25. Giordana

    Olá Rogério, será que pode me ajudar?

    Como faço para que um site fique centralizado na pagina quando diminue o tamanho de vizualização na tela, ou seja de 100% para 50%, e neste caso ele fique centralizado vertical e horizontal nos mesmos tamnhos.

    Responder
  26. Pingback: CSS: Centralizar Horizontal e Vertical #2 | Rogério Lino

  27. GUILHERME

    Post muito bom, mas estou com um problema numa coisa…

    Quando diminuo a janela, vai cortando o topo do site, e o scroll não consegue subir…

    Alguem sabe resolver?

    Responder

Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão / Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão / Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão / Alterar )

Google+ photo

Está a comentar usando a sua conta Google+ Terminar Sessão / Alterar )

Connecting to %s