Todo lo que se refiere al uso de display Flex, diría que está en estado experimental ya que aunque los navegadores modernos lo soportan, IE tiene sus problemas pero como cada vez menos gente lo utiliza ya no es tan limitante como en los tiempos del IE6.
Como en todos estos ejemplos ára centrar verticamente vamos a necesitar un contenedor y dentro de este le elemento que deseamos centrar
[cc lang=»html»]
Texto que se centrará verticalmente
[/cc]
Y ahora viene la magia con el CSS
[cc lang=»css»]
#container {
display: -webkit-flex;
display: flex;
display: -ms-flexbox;
font-size: 125%;
max-width:50em;
margin: 1em auto;
}
.col{
padding: 1em 2.5%;
width: 45%;
}
.col.center{
margin-top: auto;
margin-bottom: auto;
}
[/cc]
Simplemente al contenedor le di display flex y a la columna margin auto tanto top como bottom y listo, cabe destacar que por ser una propiedad reciente se maneja distnto en webkit, firefox e Internet Explorer 10 (olvídate de las versiones anteriores) por eso verás que aplico el display flex de tres formas distintas a la vez en el código.
Puedes ver la demo AQUI
