Históricamete, centrar elementos en CSS siempre había sido un pequeño dolor de cabeza. Antes de Flexbox, se usaban soluciones como margin: auto, position: absolute o trucos con transformaciones. Ahora, con Flexbox, es una de las maneras más efectivas de centrar elementos.

Configuración básica de Flexbox

Para empezar, necesitamos un contenedor con display: flex. A partir de ahí, los elementos hijos pueden alinearse fácilmente.

Código HTML base:

<div class="container">
  <div class="box">Elemento</div>
</div>

Centrar horizontalmente

Para centrar elementos en el eje horizontal (de izquierda a derecha), podemos usar justify-content: center.

Reglas CSS:

.container {
  display: flex;
  height: 300px; /* Solo para visualizar mejor el centrado */
  border: 1px solid #ccc;
  justify-content: center;
}

Esto alineará el div.box en el centro del contenedor a lo ancho.

Centrar verticalmente

Para centrar en el eje vertical (de arriba hacia abajo), usa align-items: center.

.container {
  display: flex;
  height: 300px; /* Solo para visualizar mejor el centrado */
  border: 1px solid #ccc;
  align-items: center;
}

Así, cualquier elemento dentro del contenedor quedará centrado verticalmente.

Centrar completamente (horizontal y vertical)

Para que un elemento quede exactamente en el centro, combina ambos:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ccc;
  height: 300px;
}

Este es el método más sencillo y directo para centrar cualquier cosa en la pantalla o dentro de un bloque.

Resumen

Flexbox hace que centrar elementos sea mucho más sencillo que con métodos antiguos. Solo recuerda:

• justify-content: center alinea horizontalmente.
• align-items: center alinea verticalmente.
• Usa ambos para un centrado total.