Blog Web Standards

Soluções para os problemas enfrentados pelos desenvolvedores HTML e CSS no dia-a-dia

Última modificação: 23 abril 2009

A forma seguinte de alinhamento vertical e horizontal é uma combinação de:

  • Posicionamento absoluto
  • Margens negativas

Para começar entender como funciona esse método copie o código XHTML abaixo e insira dentro da tag body:

  <div id="limites">
    <div id="conteudo">
      <h1>Alinhamento vertical e horizontal com <abbr title="eXtensible Hypertext Markup Language">XHTML</abbr> e <abbr title="Cascading Style Sheets">CSS</abbr></h1>
      <p>Olá mundo!</p>
    </div>
  </div>

Nesse exemplo o elemento que precisa posicionar no meio da tela será a div#limites.

Como padrão de documento base para CSS coloque o seguinte reset:

  * { margin: 0; padding: 0; z-index: 1; }

E agora para começar a posicionar a div#limites no meio da tela declare o seguinte código:

  #limites { position: absolute; top: 50%; left: 50%; width: 680px; height: 400px; background-color: #eee; }

Isso vai fazer que a div#limites tenha os seguintes estilos:

  • posição absoluta
  • canto superior esquerdo a uma distância igual a 50% do tamanho da tela
  • largura e altura
  • fundo cinza.

Com isso o resultado será meio estranho visualmente, mas esta tudo ok.

Veja ampliado

Veja ampliado

Agora é preciso puxar a div#limites para cima e para esquerda usando margim negativa, é por esse motivo que é necessário a div#limites ter uma largura e altura definida.

Puxe então a div#limites para cima ↑ com um valor igual à metade da sua altura ( margin-top: -200px; ) e o mesmo deve ser feito para o lado esquerdo ←, puxe para esquerda à metade da sua largura ( margin-left: -340px; ).

Veja ampliada

Veja ampliada

Com isso é possível posicionar a div#limites exatamente no meio da tela.

Veja ampliada

Veja ampliada

Veja o arquivo pronto do exemplo sobre alinhamento vertical e horizontal deste post.

Outros exemplos e links interessantes

31 comentários

Responder
  1. 27 de abril de 2009

    Hugo Santos disse:

    dinamicamente só com js né ? o ruim é que com js não é exatamente “preciso” visto que bordas tb influenciam =\

  2. 29 de abril de 2009

    Rafael Librenz disse:

    Muito obrigado pela resposta da minha pergunta!!

    Mas é um pouco decepcionante. Essa limitação (a div precisa ter altura e largura especificada) dá a entender que os caras que fizeram o CSS não pensaram nisso ou não quiseram fazer.

    Engraçado que até a propriedade background dá pra posicionar com ‘center center’, e com o div (que é uma das coisas mais importantes no HTML) não tem uma maneira simples e flexível de fazer. :(

    Mas, novamente, valeu pelo post! :)

  3. 16 de junho de 2009

    Julian disse:

    Interessante, mas dá um BUG! Se a janela ficar menor que o tamanho da div#limites ela ativa o scroll somente para a parte POSITIVA.. conhece alguma outra forma?

  4. 16 de junho de 2009

    Carlitos disse:

    O problema dessa técnica é que usa o position: absolute e, por isso, dá problema com o scroll.
    Por isso deve ter bem definido as medidas do site e que ele seja visualizado na resolução mínima… Uma boa seria definir o tamanho certo para o body, assim daria o scroll de acordo com sua necessidade, mas baseado nas medidas desse elemento, e não da caixa em si (com o position…).

  5. 16 de junho de 2009

    Juarez Zaleski disse:

    Parabéns pelo blog Webstandards!! Animal! 😉

  6. 18 de junho de 2009

    Rúbio Nunes disse:

    @Rúbio Nunes:

    Hoje me deparei com o problema de centralizar e desenvolvi uma solução que funciona em todos navegadores e não precisa ficar dividindo os tamanhos e nem mexer em margens. O tamanho é especificado só uma vez nas tags. Estou mostrando alinhamento horizontal, mas se aplica ao vertical também.Segue :.divPai{position:absolute; display: block; left:50%; padding: 0px; border: 0px;}.divFilho {right:50%;}Como utilizar :CONTEUDO

    Aqui não aceita html. Segue a continuação :

    body style=”overflow:hidden;width:100%;”
    div class=”divPai” style=”width:400px”
    div class=”divFilho”
    CONTEUDO
    /div
    /div
    /body

  7. 18 de junho de 2009

    g3 disse:

    @Rúbio Nunes:

    Segui suas informações e inclusive coloquei os styles inline também, mas o resultado foi igual em todos os navegadores e infelizmente não renderizou como o esperado.

    Para funcionar esse método é necessário deixar a “divFilho” com posição absoluta e largura definida, mas será preciso mudar o overflow: hidden para overflow-x: hidden. Na real tudo isso é mesma coisa que colocar uma largura e adicionar margin: 0 auto para centralizar, que é o que geralmente usamos.

    Agora em relação esse método funcionar na vertical eu desconheço. Envie para gente seu arquivo em anexo para que possamos ver como você fez! Obrigado!

  8. 24 de junho de 2009

    Rúbio Nunes disse:

    Desculpa pela demora em responder novamente. Procurei na Internet pra ver se mais alguém utilizava essa técninca, e encontrei esse tutorial. Engraçado como a gente pensa que criou algo novo e já tem algo identico na internet.

    http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support#

    Ele usou pra centrar um menu, mas em teoria pode centrar qualquer elemento.

  9. 24 de junho de 2009

    Gustavo Krause disse:

    @Rúbio Nunes:

    Muito bom esse post que você indicou, muito bem feito ele. Certamente dá pra usar esse método, ainda mais em menu de abas que precisa ser flexível ao conteúdo e também centralizado. Obrigado pela informação! :)

  10. 15 de julho de 2009

    Vicente Lyrio disse:

    Desde que não usem float algum, basta usar margin:auto. Funciona desde que o elemento tenha um display:block.

    um exemplo: http://www.saldanhaconstrutora.com.br

    abs

  11. 22 de setembro de 2009

    Leti disse:

    Excelente exemplo, fácil, claro, direto! Compartilhar conhecimentos úteis como este faz com que nós desenvolvedores construamos uma web melhor.
    Valeu!

  12. 24 de outubro de 2009

    Rodrigo disse:

    Caraca, muito show. Muito obrigado, tentei resolver sozinho e não consegui, pesquisei e encontreo aqui a solução.

    Estou desenvolvendo http://www.shopinhome.com.br/semedni

    Avalieme e critiquem ai e mandem o comentario pro meu email!

  13. 1 de novembro de 2009

    Carla disse:

    Adorei as dicas do site de vocês, parabéns!!!

  14. 16 de fevereiro de 2010

    gadarf disse:

    Muito bom.

  15. 20 de março de 2010

    Marcos Nascimento disse:

    amigos, sou iniciante na area e estou preecisando de uma luz… quero saber como faço para expandir meu website na horizontal, assim tenho um monitor quadrado entao construo o site com base nele, mais se vou abrir num monitor retangular o website nao expande horizontalmente fica centralizado na pagina com as margens esquerda e direta em branco, e seu quero q ele expanda tomando toda a area do monitor automaticamente em monitores do formato horizontal, que ele tenha um autoajuste se a tela for quadrada ele encaixe na tela e se for horizontal ele expanda ocupando toda a tela… amigos estou muito precisando deste dica… aguardo ansioso por uma ajuda… abraço e muito obrigado

  16. 4 de abril de 2010

    gadarf disse:

    Funciona muito bem em todos navegadores.

  17. 12 de abril de 2010

    André G. disse:

    Muito bom o tutorial

  18. 19 de agosto de 2010

    andré batista disse:

    cara eu sou designer então manjo pouco de programação, com sua ajuda eu consegui alinha tudo aqui, ficou do jeito que eu queria!! Valeu!!

  19. 6 de setembro de 2010

    Gabriel Anderson disse:

    Muito mais fácil fazer assim:
    basta colocar dentro de uma div com position relative (não sei se precisa mesmo, testa sem pra ver)
    Centralizar horizontalmente:
    margin-left:auto
    maring-right:auto

    aí ele fica no meio :)
    é o q eu uso pra centralizar o menu da barra de cima em:
    http://ondesair.awardspace.us

  20. 1 de outubro de 2010

    Gustavo Straube disse:

    Sabia que esse tutorial ia ser muito útil algum dia! 😀

    Precisei centralizar o conteúdo de um hotsite na página e corri para cá para ver como fazia.

    Valeu!

  21. 7 de outubro de 2010

    Fernando Henrique disse:

    Excelente post!

  22. 18 de novembro de 2010

    george disse:

    valeu. Me ajudou!
    abs

  23. 26 de dezembro de 2010

    adailton disse:

    sera que da para posicionar botoes com css? ou é só divs e imagens?

  24. 7 de janeiro de 2011

    g3 disse:

    É possível, colocando display: block em um botão você tem o mesmo comportamento de uma div em um botão…

  25. 23 de março de 2011

    Fullano disse:

    pois é,,,,só que não funciona corretamente quando a tela é restaurada ou a resolução é outra, o scroll não “pega”a parte negativa :(

  26. 27 de setembro de 2011

    Ivelise disse:

    Galera, muito obrigada pela explicação!
    Estava com um problema de centralização de menu conforme o zoom que era inserido nas ferramentas do browser e agora consegui arrumá-lo!

    Muito Obrigada!

  27. 19 de dezembro de 2011

    Edvanio disse:

    estou construindo um site e não consigo centralizar. estava usando o dreamweaver cs5, mas deu um probleminha na hora de manter centralizada na rede, estava usando camadas.
    agora tentei fazer pelo publisher 2010, fica ok, mas na hora de centralizar ai sim pronto da tudo errado.
    por favor me ajude…. obrigado!!!

  28. 19 de dezembro de 2011

    g3 disse:

    @Edvanio: Evite desenvolver usando editores wysiwyg, siga os passos do post que certamente você consegue alinhar e centralizar o seu elemento na tela.

  29. 26 de fevereiro de 2012

    Eric disse:

    Muito legal, parabéns e obrigado pela ajuda!

  30. 8 de março de 2012

    BSS disse:

    Olá, pessoal boa tarde. Parabéns pelo Post. Agora eu estou com problema relacionado a isso. No meu caso, acontece que a imagem fica posicionada dependendo do PC que é visualizada, e não de acordo com o que foi configurado na CSS. Kkk. É até difícil de explicar. Mas tipo aqui no Pc que eu fiz a imagem está posicionada no meio da Tela como eu queria que ficasse, só que em alguns ela aparece mais recuada pra direita, em outros aparecem normalmente. Em alguns celulares aparecem normal, em outros não. Confiram aí, e vejam como aparece na tela de vocês. http://www.cfcatitude.com.br/mvc . Se alguém souber ajudar eu agradeço.

    No Aguardo.

  31. 8 de março de 2012

    BSS disse:

    Consegui resolver aqui. Pura desatenção Affz. ¬¬ @BSS:

Escreva seu comentário