Durante mucho tiempo, centrar un elemento verticalmente en CSS fue una actividad espiritualmente agotadora. Había trucos con position: absolute, fórmulas con transform, hacks con line-height, y gente murmurando propiedades como si fueran conjuros prohibidos. Existían artículos enteros titulados "Cómo centrar un div", y algunos hasta tenían comentarios airados.
Flexbox vino a poner orden. Y lo hizo con dos propiedades que vas a usar todos los días.
Cuando un contenedor tiene display: flex, aparecen dos ejes invisibles que rigen cómo se colocan los hijos:
Por defecto, el eje principal va en horizontal (de izquierda a derecha) y el secundario en vertical (de arriba a abajo). Es decir: por defecto, los hijos se reparten a lo ancho.
Pero ese "por defecto" importa mucho, porque el eje principal no está grabado en piedra: lo decides con flex-direction.
flex-direction: row: el eje principal va en horizontal.flex-direction: column: el eje principal va en vertical.En otras palabras: flex-direction decide hacia dónde apunta la fila de mando.
Aquí entran las dos propiedades estrella de esta lección:
justify-content: alinea los hijos en el eje principal.align-items: alinea los hijos en el eje secundario.Y aquí está el detalle que evita muchísimas confusiones: si cambias flex-direction, también cambia el eje sobre el que trabaja justify-content.
flex-directionMira este ejemplo:
Como el contenedor ahora va en columna, el eje principal pasa a ser vertical. Eso significa que:
justify-content centra de arriba a abajo.align-items centra de izquierda a derecha.No es que las propiedades cambien de personalidad: lo que cambia es el eje que gobiernan.
Tanto justify-content como align-items aceptan varios valores. Los más habituales son:
flex-start: pegado al inicio (izquierda o arriba).center: justo en el medio.flex-end: pegado al final (derecha o abajo).space-between: el primero al inicio, el último al final, y el resto repartido entre ambos (solo para justify-content).space-around: espacio igual alrededor de cada hijo (solo para justify-content).No hace falta memorizarlos hoy. Con la práctica los vas a reconocer al vuelo.
Si quieres centrar un elemento horizontal y verticalmente dentro de su contenedor, basta con esto:
Y de pronto, sí: el contenido queda justo en el centro. Sin drama. Sin hacks. Sin sacrificar una cabra al compilador.
Estas tres líneas son probablemente las más copiadas y pegadas en toda la historia reciente del desarrollo web. Y con razón.
Para que el centrado vertical se note, el contenedor necesita tener altura suficiente. Si el contenedor mide exactamente lo mismo que su contenido, no hay espacio sobrante donde centrar nada — y parece que align-items no hace nada.
Si alguna vez piensas "lo centré pero no lo veo centrado", lo más probable es que tu contenedor no tenga altura. Dale un height (o asegúrate de que ocupa toda la pantalla con height: 100vh) y el truco aparece.
Y si además notas que justify-content parece moverse en vertical en vez de en horizontal, no es magia negra: seguramente hay un flex-direction: column cambiando el eje principal.
Haz que .escenario use Flexbox y centre su contenido en ambos ejes. Vas a necesitar tres propiedades: display: flex, justify-content: center y align-items: center.
Si quieres experimentar un poco más después, prueba a añadir flex-direction: column y observa cómo cambia la lógica de los ejes aunque sigas usando las mismas propiedades.
Nota: Si quieres que se centre verticalmente, el contenedor debe tener altura suficiente. Por ejemplo, height: 100vh.
Lo que antes era sufrimiento, ahora son tres líneas...