CSS no Lanche

Se 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.