Kenji Yamamoto

Alinhamento vertical apenas CSS

Todo desenvolvedor Front-end já se deparou com aquele PSD em que voce tem um elemento centralizado verticalmente e com conteudo fluído. Formas de resolver esse problema, temos várias, faz um javascript que resolve, usa o display: table-cell, usa a boa e velha tabela, mas nenhuma solução verdadeiramente utilizando html e css apenas.

Com essa necessidade em mente e a vontade de esganar o designer por ter desenhado isso, fui atras de alguma solução nova que não fosse apenas um “workaround” e me deparei com essa solução que me pareceu bem justa, vamos a ela.

O código abaixo funciona no Internet Explorer 5.0, 5.5 e 6.0, em navegadores Gecko (Mozilla, Firefox, Netscape 7), no Opera 7, Konqueror 3.3.1. (talvez mais baixo também), e no Safari. A página pode ser HTML ou XHTML, standard ou quirk mode.

CSS

.box-01 {
     display: table;
     height: 400px;
     #position: relative;
     overflow: hidden;
}
.box-02 {
     #position: absolute;
     #top: 50%;
     display: table-cell;
     vertical-align: middle;
}

.box-03 {
     #position: relative;
     #top: -50%
}

Entenda as cores:
Estilo para todos os browsers;
Estilo para browsers que segue os padrões web;
Estilo apenas para o Internet Explorer, usando hack #

Markup

<div class="box-01">
     <div class="box-02">
          <div class="box-03">
               qualquer texto de qualquer altura gerado dinamicamente
               ou não, será centralizado verticalmente
          </div>
     </div>
</div>

veja o exemplo em ação.

Posts Relacionados

• August 9, 2010 -- Dicas sobre HTML5 e CSS3
• June 22, 2009 -- 13 Add-ons para Firebug