CSS3: Centrar verticalmente utilizando display flex

por | Jun 25, 2014 | CSS, Diseño

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

1
2
3
4
5
<div id="container">
    <div class="col center">
        <p>Texto que se centrará verticalmente</p>
    </div>
</div>

Y ahora viene la magia con el CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#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;
}

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