Las taquigrafías place-* y el problema del centrado

Centrar algo en CSS fue durante quince años el chiste recurrente de la profesión, y dejó de serlo tan discretamente que mucha gente sigue escribiendo las soluciones de la era anterior. Hoy hay cuatro formas correctas de centrar, cada una con un perfil de comportamiento distinto ante el desbordamiento y el contenido inesperado, y hay tres taquigrafías que reducen seis propiedades a tres. Elegir bien no es cuestión de brevedad: es cuestión de qué pasa cuando el contenido no cabe.

Las tres taquigrafías

Cada una comprime la pareja align-* más justify-* en una sola declaración, y el orden es siempre align primero, justify después:

.a { place-content: center start; }  /* align-content: center; justify-content: start */
.b { place-items: end center; }      /* align-items: end; justify-items: center */
.c { place-self: stretch start; }    /* align-self: stretch; justify-self: start */

.d { place-items: center; }          /* un solo valor: se aplica a los dos ejes */

El orden “align antes que justify” es fácil de recordar por la vía alfabética, y es el contrario del que casi todo el mundo escribe la primera vez, porque en flex uno tiende a pensar primero en el eje horizontal.

Hay que tener presente en qué layouts sirven de verdad. place-items y place-self en Flexbox aplican solo su mitad align-*, porque la mitad justify-* se ignora en ese modo. No es un error escribirlas —el navegador acepta la declaración y aplica lo que puede— pero un lector puede pensar que hacen algo que no hacen. En Grid las tres funcionan completas, y ahí es donde se ganan el sitio.

Las cuatro formas de centrar

Grid con place-items. La más corta y la más predecible:

.centro-grid { display: grid; place-items: center; min-block-size: 100dvh; }

Funciona con cualquier número de hijos, no depende del tamaño del hijo y no requiere conocer alturas. Es la respuesta por defecto en 2026.

Flexbox con las dos propiedades. Equivalente, algo más verbosa, y con una ventaja: puedes centrar en un eje y distribuir en el otro, que es lo que quieres en barras y cabeceras.

.centro-flex { display: flex; align-items: center; justify-content: center; }
.cabecera    { display: flex; align-items: center; justify-content: space-between; }

Márgenes automáticos. Sigue siendo la técnica correcta para centrar un bloque en el eje en línea sin ningún contenedor de layout, y la única que funciona en flujo normal:

.carril { inline-size: min(70ch, 100%); margin-inline: auto; }

Dentro de Flexbox, los márgenes automáticos hacen algo distinto y más potente: absorben todo el espacio libre antes de que justify-content reparta, con lo que sirven para empujar un elemento suelto sin tocar a los demás.

.barra { display: flex; gap: 1rem; }
.barra .perfil { margin-inline-start: auto; }   /* al final, el resto donde estaba */

Posicionamiento absoluto con inset y márgenes automáticos. Es el que sigue haciendo falta cuando el elemento está fuera del flujo:

.encima {
  position: absolute;
  inset: 0;
  inline-size: fit-content;
  block-size: fit-content;
  margin: auto;      /* centra en los dos ejes dentro del bloque contenedor */
}

Este margin: auto con inset: 0 es la versión moderna del viejo truco de desplazamientos negativos, y a diferencia de aquel no necesita saber el tamaño del elemento.

Qué pasa cuando no cabe

Aquí es donde las cuatro técnicas dejan de ser equivalentes, y es el criterio que de verdad debería guiar la elección. Cuando el contenido es más grande que el contenedor, un centrado reparte el desbordamiento a los dos lados. En el eje en línea, con desplazamiento hacia el inicio, eso significa que la parte que sobra por el lado del inicio queda inalcanzable: no hay forma de desplazarse hacia atrás para verla.

/* si el contenido es mas ancho que el contenedor, se pierde por la izquierda */
.riesgo { display: flex; justify-content: center; overflow: auto; }

Los márgenes automáticos tienen el mismo comportamiento y por la misma razón: un margen automático negativo no existe, así que el navegador lo trata como cero por el lado que desborda, lo que en la práctica salva la situación en el caso del bloque centrado clásico pero no en Flexbox.

La solución del módulo a este problema es la palabra clave safe, y merece su propia lección junto con la otra novedad reciente del módulo.