Centrado vertical con CSS3

Uno de los problemas que se presentan con mayor frecuencia al trabajar con CSS es el centrado vertical.

Hay una gran cantidad de técnicas para solucionar este problema de forma consistente, pero hasta hace muy poco no existían formas sencillas de hacerlo sin recurrir a hacks.

Veamos que podemos hacer con las nuevas propiedades que nos ofrece CSS3. Pueden ver los ejemplos funcionando en este demo.

Flexbox

Flexbox nos permite distribuir el contenido de forma dinámica en un contenedor, tanto horizontal como verticalmente. Es justo lo que necesitamos para centrar verticalmente y el código es muy sencillo. De hecho hay dos formas de hacerlo.

Tengamos como base el siguiente markup:

<div class="container">
  <div class="children">
    ... contenido ...
  </div>
</div>

Primer metodo

.container {
  align-items: center;
  display: flex;
}

La propiedad align-items nos permite alinear verticalmente los elementos, de forma similiar a como text-align lo hace en elementos inline horizontalmente.

Segundo metodo

.container {
  display: flex;
}
.container .children {
  margin: auto;
}

En este caso nos valemos de margin, que en Flexbox distribuye el espacio, tanto vertical como horizontal, cuando le asignamos el valor auto.

Transforms

Las transformaciones en CSS nos permiten modificar las coordenadas espaciales de los elementos.

Cuando definimos una transformación con porcentaje, este se calcula respecto a las dimensiones del mismo elemento. Esta característica la podemos aprovechar para centrar verticalmente elementos usando TranslateY.

.container .children {
  position: relative;
  transform: translateY(-50%);
  top: 50%;
}

Esta técnica requiere el uso de position: relative para mover hacia abajo nuestro elemento 50% (respecto al contenedor), con lo cual la parte superior queda centrada. Luego movemos el elemento hacia arriba usando translateY para que quede en la posición deseada.

Cual técnica usar?

Creo que en este caso es cuestión de gustos.

De Flexbox me gusta que es una propiedad que se creo justamente para hacer este tipo de cosas.

El código usando Transforms se siente un poco como un hack, pero me gusta que se entiende perfectamente lo que se intenta hacer.

El soporte en distintos navegadores es muy similar. Transforms tiene una ligera ventaja, con un soporte del 89.64% contra un 87.46% de Flexbox, de acuerdo a datos de caniuse.com

2 comentarios sobre “Centrado vertical con CSS3”

Deja un comentario

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