Cómo centrar un elemento con CSS: horizontal y vertical

Centrar un elemento con CSS fue durante años un chiste del oficio. Hoy hay una forma corta para cada caso. Aquí están las cinco que vas a usar, de la más recomendable a la más especial, cada una comprobada en Chrome, Firefox y Safari.

1. Con Grid: la más corta

<div class="escena"><div class="tarjeta">Centrado con Grid</div></div>

.escena { height: 160px; background: #eef3f9; border-radius: 10px; }
.tarjeta { padding: 12px 18px; background: #1e64af; color: white; border-radius: 8px; font-family: system-ui, sans-serif; }
.escena {
  display: grid;
  place-items: center;
}

Dos líneas en el contenedor: display: grid y place-items: center, que centra en los dos ejes a la vez. Queda centrado en horizontal y en vertical en los tres navegadores. Es la mejor opción cuando el contenedor tiene un solo hijo.

2. Con Flexbox: cuando hay varios elementos

<div class="escena"><div class="tarjeta">Centrado con Flexbox</div></div>

.escena { height: 160px; background: #eef3f9; border-radius: 10px; }
.tarjeta { padding: 12px 18px; background: #1e64af; color: white; border-radius: 8px; font-family: system-ui, sans-serif; }
.escena {
  display: flex;
  justify-content: center;
  align-items: center;
}

justify-content centra en el eje principal (horizontal, en una fila) y align-items en el cruzado. Resultado: centrado en horizontal y en vertical. Con varios hijos, Flexbox los centra en fila; añade gap para separarlos o flex-direction: column para apilarlos.

3. Con margin: auto: un bloque de ancho fijo

<div class="escena"><div class="tarjeta">Centrado con margin</div></div>

.escena { height: 160px; background: #eef3f9; border-radius: 10px; }
.tarjeta { padding: 12px 18px; background: #1e64af; color: white; border-radius: 8px; font-family: system-ui, sans-serif; }
.tarjeta {
  width: 220px;
  margin: 0 auto;
}

El clásico para centrar un bloque, como el contenido de una página. Necesita un ancho (width o max-width) y centra solo en horizontal: en el flujo normal, un margen automático vertical vale 0. Dentro de un contenedor flex o grid, en cambio, margin: auto sí centra en los dos ejes.

4. Con text-align: texto e imágenes en línea

<p class="centro">Un texto centrado <a href="#">y un enlace</a></p>

body { font-family: system-ui, sans-serif; }
.centro { text-align: center; background: #eef3f9; padding: 12px; }

text-align: center centra el contenido en línea de un bloque: texto, enlaces, imágenes, botones. No centra el bloque en sí. Si un div no se centra con él, es que el div es un bloque: usa una de las anteriores.

5. Con position: absolute: encima de otra cosa

<div class="escena"><div class="tarjeta">Centrado encima</div></div>

.escena { height: 160px; background: #eef3f9; border-radius: 10px; }
.tarjeta { padding: 12px 18px; background: #1e64af; color: white; border-radius: 8px; font-family: system-ui, sans-serif; }
.escena { position: relative; }
.tarjeta {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Para colocar algo centrado encima de otro elemento (un botón de reproducir sobre un video, un texto sobre una foto). top y left al 50 % ponen la esquina del elemento en el centro, y translate(-50%, -50%) lo desplaza la mitad de su propio tamaño. Centrado en horizontal y en vertical. No olvides position: relative en el contenedor.

Cada fragmento de HTML de esta página pasó por el Nu Html Checker 26.11.4 (el validador del W3C) y cada resultado se pintó y se midió en Chromium, Firefox y WebKit antes de publicarla. Prueba tus cambios en el editor de HTML y CSS o aprende desde cero con el curso.