Centrar un elemento en la pantalla ha sido durante años una de las mayores frustraciones de quien empieza con CSS. Con Flexbox se resuelve de forma sencilla y predecible. En este artículo vas a aprender a centrar cualquier elemento, tanto en horizontal como en vertical.
El truco en tres líneas
Imagina que tienes un contenedor y quieres colocar su contenido justo en el centro. Solo necesitas convertir ese contenedor en un contenedor flex y darle dos propiedades de alineación:
.contenedor {
display: flex;
justify-content: center; /* centra en horizontal */
align-items: center; /* centra en vertical */
}Con esas tres líneas, cualquier elemento que pongas dentro de .contenedor quedará perfectamente centrado.
¿Qué hace cada propiedad?
Para entenderlo bien, conviene saber que Flexbox trabaja con dos ejes:
- justify-content: alinea los elementos a lo largo del eje principal (por defecto, el horizontal).
- align-items: alinea los elementos a lo largo del eje secundario (por defecto, el vertical).
Al poner ambas en center, el contenido se sitúa en el centro exacto en las dos direcciones.
Un ejemplo completo
Este sería el código HTML y CSS de una tarjeta centrada en toda la pantalla:
<div class="contenedor">
<div class="tarjeta">¡Estoy centrada!</div>
</div>.contenedor {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* ocupa todo el alto de la ventana */
}El detalle importante es el height: 100vh: sin una altura definida, el contenedor solo mide lo que ocupa su contenido y no notarás el centrado vertical.
Para recordar
Siempre que quieras centrar algo, pregúntate: ¿el elemento a centrar está dentro de un contenedor con display: flex? Si es así, justify-content y align-items son tus mejores amigos.
En el curso de CSS profundizamos en Flexbox con más ejemplos prácticos. ¡Nos vemos allí!
← Volver al blog