Cómo centrar un div: todos los métodos, uno al lado del otro
Cómo centrar un div
Cómo centrar un div: 7 métodos CSS, en vivo y comparados | We.Inc
Centra un div en horizontal, en vertical o en ambos ejes. Activa flexbox, grid, margin auto, posicionamiento absoluto, text-align y line-height sobre una misma caja, y mira el CSS y cuándo falla cada uno.
Centrar un div en ambos ejes requiere dos líneas en el padre: display: grid; place-items: center; o display: flex con justify-content: center y align-items: center. Solo en horizontal, da al div un ancho y margin-inline: auto. Para que se note el centrado vertical, el padre necesita una altura mayor que la del hijo.
La versión corta
Necesidad
CSS en el padre
Tailwind
Ambos ejes
display: grid; place-items: center
grid place-items-center
Ambos ejes
display: flex; justify-content: center; align-items: center
flex items-center justify-center
Bloque en horizontal
(en el hijo) margin-inline: auto + un ancho
mx-auto w-…
Sobre una imagen
position: relative, hijo con inset: 0 + margin: auto
relative / absolute inset-0 m-auto
Elige un método y un eje y la caja de la demo se mueve, se escribe el CSS del padre y del hijo, y una nota indica dónde falla ese método. Se cubren siete técnicas, incluidas las antiguas que todavía encontrarás en código existente, seguidas de una tabla para decidir cuál usar.
Elige horizontal, vertical o ambos.
Recorre los métodos. Los que no pueden centrar en el eje elegido lo dicen en lugar de fingir.
Lee la nota de fallo del método y luego copia el CSS o las clases de Tailwind.
Consulta la tabla de decisión de abajo cuando no tengas claro cuál usar.
Cuando algo no se centra en vertical, ponle primero un contorno al padre. Nueve de cada diez veces solo es tan alto como su contenido.
En código nuevo, usa grid o flex. Mantienen al hijo en el flujo, así que el padre sigue creciendo a su alrededor.
Para centrar un bloque de texto y mantener sus líneas alineadas a la izquierda, centra el bloque con margin-inline: auto y no toques text-align.
margin: auto en un hijo flex es un buen truco: absorbe el espacio sobrante por todos los lados y centra solo ese elemento.
Preguntas frecuentes
¿Por qué mi div no se centra en vertical?
Normalmente porque el padre no tiene altura de sobra. Un bloque solo es tan alto como su contenido, así que no hay espacio en el que centrar. Da al padre un height, un min-height (por ejemplo 100dvh para pantalla completa) o deja que se estire dentro de un layout flex o grid más alto.
¿Cuál es la forma más corta de centrar un div?
display: grid; place-items: center; en el padre. Centra al hijo en ambos ejes, funciona con cualquier tamaño de hijo y no necesita ancho ni alto en el hijo.
¿Cómo centro un div en toda la página?
Haz que body o un contenedor tenga al menos la altura del viewport: min-height: 100dvh; display: grid; place-items: center;. Para un modal que flota sobre la página, usa position: fixed; inset: 0; margin: auto; con un ancho y un alto definidos, o el elemento nativo dialog, que se centra solo.
¿margin: 0 auto sigue funcionando?
Sí, para centrar en horizontal un bloque que tenga un ancho menor que el de su padre. margin-inline: auto es la forma lógica moderna y no toca los márgenes superior e inferior.
¿Cómo centro un div en Tailwind?
Pon flex items-center justify-center, o grid place-items-center, en el padre y dale una altura como h-screen o min-h-dvh. Para un bloque centrado en horizontal, añade mx-auto y un ancho o max-width al hijo.
Dos direcciones, dos problemas distintos
Centrar en horizontal es fácil en el layout de bloque porque el ancho se conoce: el contenedor fija el ancho del padre, así que los márgenes auto pueden repartir el espacio sobrante. La altura es lo contrario, la decide el contenido, y por eso el centrado vertical necesitó trucos durante años.
Flexbox y grid lo cambiaron al permitir que el padre reparta el espacio libre en ambos ejes. En cuanto el padre tiene una altura conocida, las propiedades de alineación hacen el resto, y el hijo sigue formando parte del flujo normal.
Cuándo siguen teniendo sentido los métodos antiguos
El posicionamiento absoluto es lo adecuado cuando lo centrado debe flotar sobre otro contenido, como un botón de reproducir sobre la miniatura de un vídeo o un indicador de carga sobre una tarjeta. La versión con inset y margin auto evita los bordes borrosos de medio píxel que puede producir un translate.
text-align sigue siendo la forma más rápida de centrar un icono o un botón en línea dentro de una línea de texto. El centrado con line-height solo tiene sentido en badges de una línea que controlas por completo.
Tabla de decisión
Qué método para cada caso
Método
Horizontal
Vertical
Ambos
Cuidado con
Flexbox
Sí
Sí
Sí
El centrado vertical necesita que el padre sea más alto que el hijo. Con flex-direction: column las dos propiedades intercambian sus ejes.
Grid place-items
Sí
Sí
Sí
Varios hijos se apilan en filas, cada uno centrado en la suya, así que se reparten en vertical en lugar de quedar juntos. Envuélvelos en un solo elemento.
margin: auto
Sí
No
No
En el flujo de bloque normal solo centra en horizontal, y solo cuando el hijo tiene un ancho menor que el padre. Dentro de un padre flex o grid, margin: auto centra en ambos ejes.
Absolute + transform
Sí
Sí
Sí
El hijo sale del flujo, así que el padre ya no crece a su alrededor. Los desplazamientos de medio píxel pueden emborronar el texto, y transform convierte al hijo en bloque contenedor y contexto de apilamiento.
Absolute inset + margin auto
Sí
Sí
Sí
El hijo necesita un tamaño explícito en el eje centrado. Sin él, inset: 0 simplemente estira al hijo hasta llenar el padre. Los anchos fit-content también funcionan en los navegadores actuales.
text-align: center
Sí
No
No
Solo mueve el contenido en línea: texto, imágenes, cajas inline-block. Un div de bloque normal lo ignora, y el texto dentro del hijo también hereda el centrado.
No
Sí
Sí
Falla en cuanto el texto pasa a una segunda línea, y la altura hay que escribirla a mano dos veces. Vale para un badge o un botón de una línea, nada más.
Recetas listas para copiar
Una tarjeta en el centro de la pantalla
En una página real usa min-height: 100dvh en el contenedor. Aquí el marco usa una altura fija para que quepa.
Botón de reproducir sobre una miniatura
inset: 0 con margin: auto centra un hijo de tamaño fijo sin transform, así que los bordes quedan nítidos.
Un elemento centrado y los demás en los extremos
Los márgenes auto en un hijo flex ocupan todo el espacio sobrante, así que el logo queda en el centro de la barra mientras el menú y el carrito se quedan a los lados.
El centrado vertical necesita que el padre sea más alto que el hijo. Con flex-direction: column las dos propiedades intercambian sus ejes.
Varios hijos se apilan en filas, cada uno centrado en la suya, así que se reparten en vertical en lugar de quedar juntos. Envuélvelos en un solo elemento.
En el flujo de bloque normal solo centra en horizontal, y solo cuando el hijo tiene un ancho menor que el padre. Dentro de un padre flex o grid, margin: auto centra en ambos ejes.
El hijo sale del flujo, así que el padre ya no crece a su alrededor. Los desplazamientos de medio píxel pueden emborronar el texto, y transform convierte al hijo en bloque contenedor y contexto de apilamiento.
El hijo necesita un tamaño explícito en el eje centrado. Sin él, inset: 0 simplemente estira al hijo hasta llenar el padre. Los anchos fit-content también funcionan en los navegadores actuales.
Solo mueve el contenido en línea: texto, imágenes, cajas inline-block. Un div de bloque normal lo ignora, y el texto dentro del hijo también hereda el centrado.
Falla en cuanto el texto pasa a una segunda línea, y la altura hay que escribirla a mano dos veces. Vale para un badge o un botón de una línea, nada más.
Prueba todos los métodos de centrado
Eje
Centrar
Método
Padre (discontinuo) e hijo (azul)
Caja hija
Este método no puede centrar en ese eje. La caja muestra dónde queda sin él.