Centrando texto verticalmente III: flexbox
No he escrito nada sobre la propiedad flexbox debido a su poco alcance en los browsers pero creo que ya es el momento. Se puede utilizar display: flex desde IE10+ (con prefijo -ms-) y Firefox / Chrome / Opera lo soportan bastante bien.
Por ahora esta propiedad permite la mejor manera de [centrar verticalmente][1] cualquier texto sin tener que agregar HTML extra.
Dado el siguiente HTML:
<div class="vertical-centered-text">
Este texto será centrado verticalmente gracias a display: flex;
</div>
El sencillo CSS:
.vertical-centered-text {
-ms-display: flex;
display: flex;
/* alineacion vertical */
align-items: center;
/* alineacion horizontal */
justify-content: center;
}
[1]: http://www.csslab.cl/2014/08/01/centrando-texto-verticalmente-ii/ “Enlace en CSSLab a “Centrado Vertical II””
Leer otros artículos