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
17 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