Centrar verticalmente con CSS

Les voy a compartir una de las tantas técnicas que existen para solucionar uno de los problemas más frecuentes que se presentan al trabajar con CSS, lo que es el centrado vertical de elementos o textos.

Es una propiedad reciente de CSS3, con la que podemos solucionar este problema y además solamente utilizar unas cuantas líneas de código. La propiedad que usaremos será:

Flexbox

Viene a solucionar uno de los mayores problemas en el desarrollo de páginas web: cómo crear páginas flexibles, fluidas y dinámicas que funcione en distintos dispositivos móviles, utilizando solamente CSS.

La declaración "display: flex;" define un “contenedor flexible” y convierte de forma automática a sus “hijos” directos en “elementos flexibles”. Más información pueden dar click aquí.

Regresando a nuestro problema de centrar verticalmente, un elemento: tomaremos el siguiente ejemplo:

Posteriormente, añadiremos el código CSS que nos ayudará a realizar el centrado vertical.

Lo que nos dará la imagen que mostramos al inicio. Para mayor soporte de la explicación adjuntamos código para poder descargar. Espero que les haya gustado el aporte, muy pronto habrá nuevos temas.