CSS3: Centrar verticalmente utilizando display flex

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

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Time limit is exhausted. Please reload the CAPTCHA.