Centrar elementos verticalmente con CSS – flexbox
Por 
Te mostraré con un ejemplo sencillo como centrar elementos verticalmente con CSS utilizando flexbox. Esto siempre ha representado un problema para los maquetadores a lo largo del tiempo, pero las propiedades de flexbox nos han traído la solución.
Las prácticas poco efectivas aplicadas anteriormente en estos casos abarcaban el uso de paddings, margins y hasta line-height en texto, lo que causa mucha frustración sobre todo en los iniciados con CSS. Ahora vayamos al caso, para ello necesitaremos:
- Un contenedor al que agregamos la clase «.contenedor», donde que añadimos la propiedad display:flex; (Adicionalmente justify-content:center para centrar horizontalmente).
- El contenido a centrar «.contenido-center» donde alinearemos mediante align-self:center
Solo esto necesitas ya que funciona para centrar verticalmente elementos de cualquier tipo (sea texto o divs).
.contenedor{
display: flex;
justify-content: center;
}
.contenido-center{
align-self: center;
}
<div class="contenedor">
<p class=".contenido-center"> Aquí va el contenido </p>
</div>
En caso que necesites alinear superior o inferiormente puedes recurrir a las propiedades:
align-self: flex-start;
align-self: flex-end;Te dejo un Codepen para que puedas probar esta técnica en profundidad:
See the Pen Vertical Align CSS by Angel Mavare (@angelmavare) on CodePen.
Espero que este ejemplo haya sido de tu utilidad, compartelo con quien lo necesite y recuerda que puedes encontrar mas utilidades en:
Si deseás profundizar en este tema visita:
