Alinhamento vertical de elementos blocos div com CSS3

A melhor e mais elegante forma de centralizar um elemento verticalmente com CSS3 é utilizando Flexbox. Dessa forma, você não precisa recorrer a gambiarras como display: table, que podem causar problemas de compatibilidade e legibilidade do código.

<style>
.absmiddle {
  display:flex;
  align-items:center;
}
</style>
<div class="absmiddle" style="height:100px; background:gold">
  <div>
    Elemento verticalmente centralizado!
  </div>
</div>

Com a propriedade display: flex, você consegue tanto alinhar horizontalmente com justify-content quanto verticalmente com align-items os elementos filhos. Isso torna o código mais limpo e de fácil entendimento. No exemplo acima, o elemento interno será centralizado verticalmente dentro da div com a classe .absmiddle.

Para ver o código em funcionamento, basta dar uma conferida no JSFiddle.

Com Flexbox o código fica muito mais simples e funcional. Esqueça aquela gambiarra de display: table. Arghhh…

Utilizar Flexbox é o método recomendado para alinhar elementos verticalmente no CSS3, proporcionando maior praticidade e eficiência na criação de layouts responsivos.