Alinhamento Vertical Absoluto usando CSS Cross Browser

Sempre perco tempo procurando resolver o problema de alinhamento de conteúdo na vertical e que seja cross browser de conteúdo dentro de DIV.

Depois de testar vários métodos, o modo mais simples de alinhar conteúdo na vertical foi criando dois DIVs, um DIV externo usando a propriedade display:table e um segundo DIV usando o display:table-cell com a propriedade vertical-align:middle.

Espero que seja útil para mais pessoas!

 <style>  
   .ContainerExt {  
     display: table;  
     width: 330px;  
     height: 180px;  
     background-color: #333333;  
     overflow: hidden;  
   }  
   .ContainerExt:hover {  
     background-color: #000000;  
   }  
   .ContainerExt .ContainerInt {  
     display: table-cell;  
     margin: 0 auto;  
     text-align: center;  
     vertical-align: middle;  
     width: 100%;  
   }  
 </style>  
 <div class="ContainerExt">  
   <div class="ContainerInt">  
     <div class="boxQualquer">  
       Conteúdo Centralizado  
       <br />Multi-linha.  
     </div>  
   </div>  
 </div>  

Fonte: Andy Howard

Problemas com CSS, até quando?

Recebi um e-mail através de uma lista de discussão perguntando como que faz para resolver um problema com o CSS tal.

Muitas vezes esquecemos que é raro os casos que precisamos criar algo do zero.

Existem muitos CSS frameworks que facilitam esse trabalho de maquetação web.

Seus problemas com CSS acabaram! :)

Experimentem alguns frameworks para ver com qual você se adapta melhor e nunca mais tenha problemas com CSS :)

960 Grid System => http://960.gs/
Simple Grid => http://www.webnicer.com/simple-grid-system.html
The Golden Grid => http://code.google.com/p/the-golden-grid/
1Kb Grid => http://www.1kbgrid.com/
Blueprint => http://www.blueprintcss.org/