Centralizar div na horizontal e vertical com float e clear
Postado por: Pedro Rogério emSe você não ficou muito satisfeito com a primeira técnica que postei por aqui de como centralizar na horizontal e vertical com CSS, então vai ficar surpreendido com essa que dscobri recentemente, que faz o uso de float e clear para centralizar o elemento na horizontal e vertical.
Nesse exemplo, vamos utilizar uma div com o id “container”, esse será o elemento que iremos centralizar na página. Observem a seguinte marcação HTML:
<div id="distance"></div>
<div id="container">
<h1>Centralizar div na horizontal e vertical com float e clear - crossbrowser</h1>
<p>
Esse box fica no meio do browser em relação a seu viewpoint.<br />
O conteúdo não desaparece quando o viewpoint é redimensionado e fica menor que o box.
</p>
</div>
Um HTML simples, composto por uma div para conter todos os nossos elementos, e por fora dessa div, uma outra, chamada de distance(você pode chamá-la como quiser), que será responsável por empurrar o nosso box, emconsequência o deixando sempre no centro do viewpoint do browser. As regras CSS são as seguintes:
html, body {
height:100%;
}
body {
text-align:center; /* Centralizar na horizontal no IE caso o site entre em Quirks mode */
}
#distance {
width:1px;
height:50%;
background-color:#fc6;
margin-bottom:-13.75em; /* Metade da altura do nosso box que ficará centralizado */
float:left;
}
#container {
margin:0 auto;
position:relative; /* Coloca o container frente ao elemento com o id distance */
text-align:left;
height:27.5em;
width:45em;
clear:left;
background-color:#ff9;
border:1px solid #c93;
border-top-color:#fff;
border-left-color:#fff;
}
Como podem ver, deve ser definido que as tags html e body tenham uma altura de 100%. Depois definimos um height de 50% para nossa div “distance”, adicionamos float e um margin-bottom negativo, esse valor deve ser a metade da altura do elemento que você deseja centralizar, que no exemplo foi a div container. A utilização de clear é necessário para que o elemento fique centralizado na vertical. Vejam nesse exemplo o código em ação.
Esse exemplo foi retirado do site d-graff.
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o CSS no Lanche também escreve para o Pinceladas da Web, blog com assuntos gerais sobre desenvolvimento web.
Boa!
Po, já precisei deste código e tentei vários, mas nada funcionou no IE7. Este funcionou, e parece bem simples.
Bom eu já estava satisfeito com o que você tinha postado antes mas este tbm é muito bom… valeu meu camarada
Aeee, ta melhorando! Um dia ainda faremos isso com menos código e sem precisar definir a altura. Porque não né?
E quando a altura é variável?
Quando se trata de centralizar, as vezes dá até vontade de criar uma tabela com valign=”center”
Isso sim dá saudades da era das TABLES…
Mas graças ao Pedro Rogerio e suas dicas, a gente se vira.
Ah! Também achei mais fácil a outra técnica!
Abs
@Niraldo,
Aí a única solução é recorrer a JavaScript.
Ainda acho a primeira solução adequada, pois nela é necessário a declaração de apenas uma DIV, mas ambas estão longe de resolver nossos problemas cotidianos…
@ Pedro: Há esperanças cara… dá uma olhada nesta solução:
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
Usei ela neste site e funcionou muito bem! Existe uma lista com botões em verde claro, a solução foi aplicada lá: http://www.df.gov.br
E ae. Blz? Com seu artigo consegui resolver meu problema, porém ele não acertou a posição do div no navegador Ópera! O que posso fazer pra acertar nesse navegador também?
Abraço
@Thyago,
Você pode criar regras no CSS para que só o Opera entenda: http://www.cssnolanche.com.br/css-hacks-para-ie-firefox-opera-safari-konqueror/
Ok. Eu jogaria esta linha (body:only-of-type {}) onde?
Muito boa a técnica.
Ótima dica!
Ótimo! Obrigado
Show! Obrigado pela dica!
vc é o cara! valeu
[...] http://www.cssnolanche.com.br/centralizar-div-na-horizontal-e-vertical-com-float-e-clear/ CSS ← Traçar rota com API do google maps v2 GostoBe the first to like this post. [...]
eu adorei a dica. me ajudou muito
mas como eu faco pra div container ficar mais perto do topo?