DevHive

Centrar un div suena básico, pero cuando empiezas con CSS puede ser de lo más difícil. Lo digo porque, en mi caso, dominar el centrado fue ese “clic” que te pone un paso más adelante en el camino a desarrollador web: de repente la interfaz se ve ordenada, limpia y con jerarquía. Centrar bien da apariencia y orden a tus etiquetas HTML; básicamente eliges qué caja va en qué lugar y el layout se siente “profesional”.

1) Antes de empezar: cuándo conviene cada método

Mapa mental rápido

Quiero centrar todo el contenido de un contenedor → usa Flexbox (simple y versátil).
Contenedor con un solo hijo o prototipado rápido → Grid con place-items: center.
Necesito centrar absolutamente dentro de un bloque específico → position: absolute + transform o inset: 0 + margin: auto.
Solo centrar horizontalmente un bloque con ancho fijo → margin: 0 auto.
Centrar texto/inline → text-align: center.

Micro-demo: Flex ambos ejes y Grid place-items (en el canvas).

2) Centrar con Flexbox

Horizontal (justify-content: center)

.parent {
  display: flex;
  justify-content: center; /* eje principal */
}

Útil para menús horizontales, barras, o cuando el alto no importa.

Vertical (align-items: center)

.parent {
  display: flex;
  align-items: center; /* eje cruzado */
  min-height: 200px;   /* da espacio para que se note */
}

Ambos ejes (one-liner)

.parent {
  display: flex;
  place-content: center; /* atajo en algunos navegadores */
  /* equivalente más compatible: */
  justify-content: center;
  align-items: center;
}

Tip de experiencia: cuando estaba empezando, intenté centrar vertical con margin y me frustré; con Flex el cerebro descansa: pones dos propiedades y listo. Si tu card debe quedar clavada al centro del hero, Flex es mi elección por defecto.

Micro-demo: Flex ambos ejes.

3) Centrar con CSS Grid

place-items: center (hijo único)

.parent {
  display: grid;
  place-items: center; /* alinea contenido en ambos ejes */
}

place-content (múltiples hijos)

.parent {
  display: grid;
  place-content: center; /* centra la “rejilla” completa */
  gap: 1rem;
}

Cuándo lo uso: si ya estás en Grid para el layout, no “saltes” a Flex solo para centrar: usa place-items/place-content y mantén la coherencia del sistema.

Micro-demo: Grid: place-items center.

4) Centrar con position

absolute + transform: translate(-50%, -50%)

.parent { position: relative; }
.child  {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

Clásico, fiable y perfecto para overlays dentro de un bloque (tooltips, badges, popovers). Cuando probé esto por primera vez sentí que controlaba la “matriz” del layout.

inset: 0 + margin: auto

.parent { position: relative; }
.child  {
  position: absolute;
  inset: 0;
  margin: auto;     /* reparte el espacio sobrante */
  width: 120px;
  height: 80px;     /* necesita tamaño fijo */
}

Me encanta para cajas de tamaño fijo (íconos grandes, mini-cards). Si no das width/height, no habrá nada que centrar.

Micro-demo: Absolute + translate y Inset + margin:auto.

5) margin: 0 auto y text-align: center (casos puntuales)

margin: 0 auto (centrado horizontal de bloques)

.child {
  width: 260px;     /* requisito */
  margin: 0 auto;
}

No funciona si el elemento no tiene ancho explícito o si no es de tipo bloque. Más de una vez me pasó esto cuando estaba empezando y creí que “CSS estaba roto”; en realidad, me faltaba el width.

text-align: center (inline/inline-block)

.parent { text-align: center; }

Solo centra el contenido inline (texto, inline-block, img). No centra verticalmente por sí solo.

Micro-demo: margin: 0 auto.

6) Patrones prácticos

Modal centrado en toda la pantalla

.overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center;
}
.modal {
  width: min(520px, 86%);
  background: #0a0f1a; color: #e5e7eb;
  border-radius: 16px; padding: 18px;
}

Si quieres accesibilidad, recuerda focus trap y cerrar con Esc.

Micro-demo: Modal centrado (overlay).

Card centrada en viewport (min-height: 100vh)

.wrapper {
  min-height: 100vh;
  display: grid; place-items: center;
}

Cuando necesito una landing limpia, este patrón hace que la página respire. Personalmente, fue el que me hizo entender que “centrar” también es comunicar jerarquía.

Micro-demo: Centrar en pantalla completa (100vh).

Loader/spinner perfectamente centrado

.parent { display:flex; align-items:center; justify-content:center; }
.loader {
  width:56px; height:56px;
  border:5px solid transparent;
  border-top-color:#22d3ee;
  border-radius:50%;
  animation:spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

Micro-demo: Loader centrado.

7) Errores comunes y cómo arreglarlos

“margin: auto no me centra” → el elemento no tiene width o no es de bloque; añádelo o usa Flex/Grid.
Altura desconocida → evita hacks con line-height; usa Flex/Grid o absolute + translate.
Contenedor sin contexto → si usas absolute, recuerda position: relative en el padre.
Scroll no deseado → en modales fija el body (overflow: hidden) y usa position: fixed en el overlay.
Centrar texto vs caja → text-align centra el contenido, no la caja; si quieres la caja, usa Flex/Grid.

8) Snippets listos para copiar

Flex ambos ejes

.parent { display:flex; justify-content:center; align-items:center; }

Grid one-liner

.parent { display:grid; place-items:center; }

Absolute + translate

.parent { position:relative; }
.child  { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }

Inset + margin:auto (tamaño fijo)

.parent { position:relative; }
.child  { position:absolute; inset:0; margin:auto; width:120px; height:80px; }

Viewport completo

.wrapper { min-height:100vh; display:grid; place-items:center; }

Conclusión + checklist de elección

Cuando empiezas, centrar un div desespera; pero una vez interiorizas qué método conviene según el contexto, todo encaja. Si quieres rapidez: Flex. Si ya usas rejillas: Grid. Si necesitas un overlay quirúrgico: absolute. Para horizontales simples: margin: auto. Y recuerda: centrar bien eleva la apariencia de cualquier página.

Cómo centrar un div en CSS (todas las formas explicadas)