Ú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
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
Com isso é possível posicionar a div#limites exatamente no meio da tela.
Veja ampliada
Veja o arquivo pronto do exemplo sobre alinhamento vertical e horizontal deste post.
Outros exemplos e links interessantes
- Exemplo de alinhamento horizontal e vertical relativo a um elemento
- Posicionamento relativo
- Alinhamento horizontal e vertical
31 comentários
ResponderHugo Santos disse:
dinamicamente só com js né ? o ruim é que com js não é exatamente “preciso” visto que bordas tb influenciam =\
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!
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?
Carlitos disse:
O problema dessa técnica é que usa o
position: absolutee, 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…).
Juarez Zaleski disse:
Parabéns pelo blog Webstandards!! Animal!
Rúbio Nunes disse:
@Rúbio Nunes:
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
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!
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.
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!
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
Leti disse:
Excelente exemplo, fácil, claro, direto! Compartilhar conhecimentos úteis como este faz com que nós desenvolvedores construamos uma web melhor.
Valeu!
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!
Carla disse:
Adorei as dicas do site de vocês, parabéns!!!
gadarf disse:
Muito bom.
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
gadarf disse:
Funciona muito bem em todos navegadores.
André G. disse:
Muito bom o tutorial
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!!
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
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!
Fernando Henrique disse:
Excelente post!
george disse:
valeu. Me ajudou!
abs
adailton disse:
sera que da para posicionar botoes com css? ou é só divs e imagens?
g3 disse:
É possível, colocando display: block em um botão você tem o mesmo comportamento de uma div em um botão…
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
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!
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!!!
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.
Eric disse:
Muito legal, parabéns e obrigado pela ajuda!
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.
BSS disse:
Consegui resolver aqui. Pura desatenção Affz. ¬¬ @BSS: