Docs ejecutables de CSS: Centrar un div

Q: ¿Cómo centro un div en horizontal y en vertical?

Convierte al padre en un grid y centra su contenido: .parent { display: grid; place-items: center; }. La versión con flexbox es display: flex; justify-content: center; align-items: center;. En los dos casos el padre necesita una altura mayor que la del div.

Q: ¿Cómo centro un div solo en horizontal?

Dale un ancho y márgenes laterales automáticos: .box { width: 300px; margin: 0 auto; } (o max-width para un bloque responsive). margin-inline: auto es lo mismo con propiedades lógicas.

Q: ¿Cuál es la forma más fácil de centrar un div?

display: grid; place-items: center; en el padre: dos declaraciones, los dos ejes, un hijo de cualquier tamaño. Usa flexbox cuando el padre además coloca otros elementos en fila.

Q: ¿Cómo centro el texto dentro de un div?

Usa text-align: center en el div para el texto y el contenido inline. Centrar el div y centrar el texto que tiene dentro son dos trabajos distintos.

La respuesta corta

Para centrar un div en horizontal y en vertical dentro de su padre, convierte al padre en un grid y centra su contenido:

.parent {
  display: grid;
  place-items: center;
  min-height: 200px; /* the parent needs room to center in */
}

Funciona con un hijo de cualquier tamaño y no necesita nada en el propio hijo. Abajo hay seis métodos lado a lado. Cada caja se mide a sí misma después de renderizarse e indica a qué distancia está su centro del centro del padre:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Six ways to center</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 12px; margin: 8px; }
    .grid-of-demos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
    .stage { height: 130px; background: #e5e7eb; border: 1px solid #9ca3af; }
    .box { width: 100px; padding: 8px; background: #2563eb; color: white; text-align: center; }
    p { margin: 4px 0 0; }

    .flex { display: flex; justify-content: center; align-items: center; }
    .grid { display: grid; place-items: center; }
    .auto { display: flex; }
    .auto .box { margin: auto; }
    .abs { position: relative; }
    .abs .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
    .inset { position: relative; }
    .inset .box { position: absolute; inset: 0; margin: auto; height: 20px; }
    .content { align-content: center; }
    .content .box { margin-inline: auto; }
  </style>
</head>
<body>
  <div class="grid-of-demos">
    <div><div class="stage flex"><div class="box">flex</div></div><p></p></div>
    <div><div class="stage grid"><div class="box">grid</div></div><p></p></div>
    <div><div class="stage auto"><div class="box">margin: auto</div></div><p></p></div>
    <div><div class="stage abs"><div class="box">absolute</div></div><p></p></div>
    <div><div class="stage inset"><div class="box">inset: 0</div></div><p></p></div>
    <div><div class="stage content"><div class="box">align-content</div></div><p></p></div>
  </div>
  <script>
    document.querySelectorAll('.stage').forEach((stage) => {
      const s = stage.getBoundingClientRect();
      const b = stage.querySelector('.box').getBoundingClientRect();
      const dx = (b.left + b.width / 2) - (s.left + s.width / 2);
      const dy = (b.top + b.height / 2) - (s.top + s.height / 2);
      stage.nextElementSibling.textContent =
        'off center: x ' + Math.round(dx) + 'px, y ' + Math.round(dy) + 'px';
    });
  </script>
</body>
</html>

Los seis indican 0px en los dos ejes (el borde de 1px del escenario es igual en todos los lados, así que no desplaza el centro). Cambia el ancho o el texto de una caja y vuelve a ejecutarlo: los métodos que no dependen de un tamaño fijo se quedan en 0.

Qué método usar

Método	Centra	¿El hijo necesita un tamaño fijo?	Ideal para
Grid `place-items: center`	Los dos ejes	No	La opción por defecto: un hijo en una caja
Flexbox `justify-content` + `align-items`	Los dos ejes	No	Una fila o columna de elementos, centrados como grupo
`margin: auto` en un padre flex o grid	Los dos ejes	No	Centrar un elemento mientras sus hermanos se colocan de otra forma
`margin: 0 auto`	Solo horizontal	Un `width` o `max-width`	Contenedores de página, artículos, formularios en el flujo normal
Absolute + `translate(-50%, -50%)`	Los dos ejes	No	Capas, etiquetas y modales encima de otro contenido
Absolute + `inset: 0; margin: auto`	Los dos ejes	Sí, ancho y alto	Diálogos de tamaño fijo
`align-content: center` en un bloque	Vertical	No	Centrar en vertical sin cambiar el display del padre

Método 1: flexbox

Flexbox centra en dos ejes con dos propiedades. justify-content se encarga del eje principal (horizontal en una fila) y align-items del eje transversal:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center with flexbox</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .parent {
      display: flex;
      justify-content: center; /* horizontal */
      align-items: center;     /* vertical */
      gap: 8px;
      height: 180px;
      background: #e5e7eb;
    }
    .child { padding: 12px 16px; background: #16a34a; color: white; }
  </style>
</head>
<body>
  <div class="parent" id="parent">
    <div class="child">One</div>
    <div class="child">Two</div>
    <div class="child">Three</div>
  </div>
</body>
</html>

Con varios hijos, flexbox los centra como grupo y los mantiene en fila. Ahí es donde le gana a grid, que apilaría los tres elementos en una columna centrada. La página de justify-content explica todos los valores de alineación.

Método 2: grid

place-items: center es la abreviatura de align-items: center más justify-items: center. En un contenedor grid con un solo hijo, centra ese hijo en las dos direcciones:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center with grid</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .parent {
      display: grid;
      place-items: center;
      min-height: 180px;
      background: #e5e7eb;
    }
    .card { max-width: 220px; padding: 16px; background: white; border: 2px solid #2563eb; border-radius: 8px; }
  </style>
</head>
<body>
  <div class="parent" id="parent">
    <div class="card" id="card">A card of any size, centered by its parent.</div>
  </div>
</body>
</html>

min-height en lugar de height permite que el padre crezca si la tarjeta pasa de 180px de alto, en vez de que la tarjeta se desborde.

Método 3: margin: 0 auto (horizontal)

Un elemento de bloque con un ancho menor que su contenedor se puede centrar en horizontal con márgenes laterales automáticos. El navegador reparte el espacio libre a partes iguales entre los dos lados:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>margin auto</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    .page {
      max-width: 360px;
      margin: 0 auto;          /* same as margin-inline: auto */
      padding: 16px;
      background: #fef3c7; border: 2px solid #f59e0b;
    }
    .no-width { margin: 12px auto 0; padding: 16px; background: #fee2e2; border: 2px solid #dc2626; }
  </style>
</head>
<body>
  <div class="page" id="page">max-width: 360px and margin: 0 auto</div>
  <div class="no-width" id="nowidth">margin: auto without a width: nothing to center</div>
</body>
</html>

La segunda caja ocupa todo el ancho, así que no hay espacio libre y nada se mueve. Esa es la razón habitual de que margin: 0 auto "no funcione". Además, en el flujo normal solo centra en horizontal; ahí los márgenes auto verticales valen 0. Sin embargo, dentro de un padre flex o grid, margin: auto centra en las dos direcciones, que es la tercera caja de la comparación de arriba.

Método 4: posición absoluta y transform

Cuando el elemento debe quedar encima de otro contenido (una etiqueta sobre una foto, un modal sobre la página), posiciónalo de forma absoluta al 50% y retrocédelo la mitad de su propio tamaño:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Absolute centering</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .photo {
      position: relative;      /* the reference box */
      height: 180px;
      background: linear-gradient(135deg, #bfdbfe, #1e3a8a);
    }
    .play {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 12px 20px;
      background: white; border-radius: 999px; font-weight: 700;
    }
  </style>
</head>
<body>
  <div class="photo" id="photo">
    <div class="play" id="play">Play</div>
  </div>
</body>
</html>

top: 50%; left: 50% pone la esquina superior izquierda del elemento en el centro. Los porcentajes de translate() se refieren al tamaño del propio elemento, así que -50% lo retrocede la mitad de su ancho y de su alto, sean cuales sean. El padre debe estar posicionado (position: relative), o el elemento se centra en la página. El posicionamiento se explica en la página de position.

Una variante para elementos de tamaño conocido: position: absolute; inset: 0; margin: auto; más un width y un height. Los márgenes auto reparten el espacio en los cuatro lados.

Método 5: align-content en un bloque normal

align-content: center ahora también funciona en contenedores de bloque normales, no solo en los flex y grid. Centra el contenido en vertical sin cambiar cómo se colocan los hijos:

.parent {
  min-height: 200px;
  align-content: center;   /* vertical centering, still display: block */
}
.child {
  max-width: 300px;
  margin-inline: auto;     /* horizontal centering */
}

Es compatible con las versiones actuales de Chrome, Firefox y Safari. Los navegadores más antiguos lo ignoran, así que usa grid si tienes que darles soporte.

Centrar en toda la pantalla

Para centrar un diálogo en el viewport sin importar el desplazamiento, combina una capa fija de pantalla completa con grid:

.overlay {
  position: fixed;
  inset: 0;                     /* covers the viewport */
  display: grid;
  place-items: center;
  background: rgb(0 0 0 / 50%);
}

Para centrar en vertical el contenido de toda una página, usa min-height: 100dvh en el padre en lugar de 100vh: en los teléfonos, 100vh incluye la zona detrás de las barras del navegador, así que el "centro" queda demasiado abajo.

Centrar texto es otro trabajo

Todo lo anterior centra una caja. Para centrar el texto dentro de una caja, usa text-align: center en ella, como se muestra en la página de centrar texto en HTML. A menudo necesitas las dos cosas: grid para centrar la tarjeta y text-align para centrar las líneas dentro de ella.

Errores comunes

Un padre sin altura. Centrar en vertical necesita espacio libre; un padre que se ajusta a su contenido no tiene.
margin: 0 auto en un bloque de ancho completo. Dale primero un width o un max-width.
margin: auto para centrar en vertical en el flujo normal. Ahí los márgenes auto verticales valen 0; usa flex o grid.
Centrado absoluto sin un padre posicionado. El elemento se centra en la página, no en la caja.
align-items: center en el hijo. Las propiedades de alineación van en el padre (el contenedor flex o grid), salvo margin: auto y align-self.
text-align: center para centrar un bloque. Centra el contenido inline (texto, imágenes, hijos inline-block), no un hijo de bloque.

Preguntas frecuentes

¿Cómo centro un div en horizontal y en vertical?

Convierte al padre en un grid y centra su contenido: .parent { display: grid; place-items: center; }. La versión con flexbox es display: flex; justify-content: center; align-items: center;. En los dos casos el padre necesita una altura mayor que la del div.

¿Cómo centro un div solo en horizontal?

Dale un ancho y márgenes laterales automáticos: .box { width: 300px; margin: 0 auto; } (o max-width para un bloque responsive). margin-inline: auto es lo mismo con propiedades lógicas.

¿Por qué margin: 0 auto no centra mi div?

El div no tiene un ancho menor que su contenedor, así que no hay espacio libre que repartir (un bloque ocupa todo el ancho por defecto). Define width o max-width. Tampoco hace nada en elementos inline y nunca centra en vertical en el flujo normal.

¿Por qué mi div no se centra en vertical?

El padre solo es tan alto como su contenido, así que no hay espacio extra en el que centrar. Dale una altura al padre (o min-height) y usa el centrado de grid o flexbox.

¿Cuál es la forma más fácil de centrar un div?

display: grid; place-items: center; en el padre: dos declaraciones, los dos ejes, un hijo de cualquier tamaño. Usa flexbox cuando el padre además coloca otros elementos en fila.

¿Cómo centro el texto dentro de un div?

Usa text-align: center en el div para el texto y el contenido inline. Centrar el div y centrar el texto que tiene dentro son dos trabajos distintos.

Conceptos relacionados