Centro vertical CSS con Flexbox -

Tengo 31 años y siento que llevo siglos en el juego del desarrollo web. Siempre supimos que los diseños en CSS eran una pesadilla y todos considerábamos a Flexbox nuestro salvador. Queda por ver si resultará así, pero flexbox resuelve fácilmente un problema que CSS ha tenido durante demasiado tiempo: el centrado vertical de CSS. ¡Déjame mostrarte lo fácil que es!

El centrado vertical requiere elementos padre e hijos…

divdivBla, bla/divdivBla, bla, bla, bla .../div/div

…pero sólo el elemento padre necesita propiedades CSS configuradas para el centrado vertical de los elementos secundarios:

.flexbox-container {pantalla: -ms-flexbox;pantalla: -webkit-flex;pantalla: flex;-ms-flex-align: centro;-webkit-align-items: centro;-webkit-box-align: centro; alinear elementos: centro;}

Aparte de los prefijos de proveedores, ¡eso es CSS simple!El centrado vertical sin flexbox es, en el mejor de los casos, esperanzador, por lo que es alentador que el futuro de los diseños CSS facilite esta tarea. Todavía no estoy convencido de que Flexbox resuelva todos los problemas de diseño del mundo web, pero resolver el centrado vertical es una gran ventaja.

Te podría interesar...

Deja una respuesta

Subir