Cómo Centrar un Div con Tailwind CSS: Guía Completa

Centrar un div sigue siendo el meme del oficio porque CSS ofrece tres respuestas correctas y veinte incorrectas que “casi” se ven bien. Con Tailwind no cambia la física: cambian los nombres. Aquí el mapa corto que usamos en producción.

Centro horizontal (el 80% de los casos)

Si el elemento es de bloque y tiene un ancho, mx-auto es suficiente. Para un contenedor de lectura:

class="mx-auto w-full max-w-3xl"

No uses text-center para centrar cajas. Eso centra texto e inline, no el layout.

Centro en ambos ejes (el hero, el modal, el empty state)

Flex:

class="flex min-h-screen items-center justify-center"

Grid, equivalente y a menudo más limpio:

class="grid min-h-screen place-items-center"

Un hijo dentro de un padre ya dimensionado

El padre necesita altura. min-h-screen, h-64, o un aspect-ratio. Sin altura, “centrar vertical” no tiene contra qué medir. Luego items-center justify-center (flex) o place-items-center (grid).

• items-center: eje cruzado (vertical, en un flex-row).
• justify-center: eje principal (horizontal, en un flex-row).
• place-items-center: ambos en grid, una sola utilidad.
• absolute inset-0 m-auto h-fit w-fit: el truco antiguo; resérvalo para overlays.

Si el diseño se rompe en móvil, casi nunca es “Tailwind”. Es un padre sin altura, un hijo con width fijo más ancho que la pantalla, o un text-center disfrazado de layout. Revisa esas tres cosas antes de añadir más clases.