Centrado verticalmente con Flexbox -

Centrar verticalmente los contenidos entre hermanos e hijos es una tarea que necesitamos desde hace mucho tiempo en la web, pero que siempre nos ha parecido mucho más difícil de lo que debería ser. Inicialmente usamos tablas para realizar la tarea, luego pasamos a trucos de CSS y JavaScript porque el diseño de las tablas era terriblemente ineficiente; Sin embargo, parecía que las tablas eran la forma más fácil y confiable de lograr el centrado vertical. Cuando vertical-alignse introdujo la propiedad CSS, me emocioné muchísimo, pero rápidamente descubrí que normalmente no hacía lo que yo quería.

Después de jugar con flexbox para DevTools Debugger, descubre que align-items: center;es el héroe que siempre necesité.

Consideramos el siguiente marcado HTML que presenta contenidos de diferentes alturas:

div divHello!/div divpPellentesque habitante morbi tristique senectus et netus et malesuada famas ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egetas sempre. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra./p/div divimg src="https://davidwalsh.name/wp-content/themes/punky/images/logo.png"/div/ div

Si queremos que el contenido de cada elemento esté centrado verticalmente, podemos usar flexbox y align-itemspara que eso suceda:

.parent {pantalla: flexionar; elementos alineales: centro;}

Siempre se prometió que Flexbox sería el salvador del diseño web, pero parece haberse debilitado un poco a favor de la cuadrícula CSS; ¡Estoy feliz de que Flexbox haya solucionado el problema de alineación vertical que nos provocó pesadillas a todos durante tanto tiempo!