Cómo centrar en CSS (7 maneras)

Te traigo 7 maneras de centrar en CSS, y te aseguro que al menos una no la conocías. Centrar un elemento es de lo primero que buscamos al maquetar, y aun así seguimos copiando la misma solución sin saber por qué funciona. (A todos nos ha pasado: el botón se queda pegado a la esquina y no hay manera de moverlo).

Aquí vamos a centrar un mismo botón, vertical y horizontalmente, de 7 maneras distintas, más un bonus de la vieja escuela. Y empezamos por la menos conocida: hoy CSS ya te deja centrar con align-content sin activar Flexbox ni Grid.

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

Qué vas a construir

Una tarjeta de curso con un botón de reproducir encima de su imagen. El botón empieza pegado a una esquina y lo vamos centrando, siempre sobre el mismo HTML y cambiando solo el CSS.

Pruébalo aquí: pulsa cada manera y mira cómo se mueve el botón con el CSS que aparece al lado. Es el mismo código que te explico más abajo.

Y esta es la comparativa de las 8 formas, para que la tengas a mano:

El Short dura menos de 2 minutos y va en este orden. Pulsa un momento para saltar a esa parte en YouTube:

• 0:00 Las 7 maneras de centrar en CSS
• 0:09 El HTML: contenedor y botón
• 0:15 Manera 1: align-content sin Flexbox ni Grid
• 0:38 Manera 2: inset y place-self
• 0:48 Manera 3: inset y margin: auto
• 0:59 Manera 4: Flexbox con margin: auto
• 1:06 Manera 5: Flexbox con justify-content y align-items
• 1:14 Manera 6: Grid con place-items
• 1:24 Manera 7: Grid con place-self
• 1:32 Bonus: top, left y translate

Qué necesitas

• Un editor de código, por ejemplo Visual Studio Code.
• Conocer lo básico de HTML y CSS: clases y display.
• Saber qué es position: relative ayuda, aunque lo repasamos en la manera 2.

Paso a paso

El código base

Todas las maneras parten del mismo proyecto: una tarjeta de curso con un contenedor card__container (el que tiene la imagen) y un hijo, el botón card__button. Este es el HTML, tal cual lo uso en el video. Ojo: no lo vamos a tocar en ningún momento, solo cambia el CSS.

<article class="card">

  <!-- Contenedor -->
  <div class="card__container">

    <!-- Botón -->
    <a href="#" class="card__button">
      <svg class="card__icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5v14l11-7z" /></svg>
    </a>

  </div>

  <!-- Contenido -->
  <div class="card__content">

    <header class="card__header">
      <span class="card__label">Curso · 01</span>
      <span class="card__badge">Nuevo</span>
      <h1 class="card__title">CSS moderno</h1>
    </header>

    <p class="card__meta">24 lecciones · 3 h 10 min · Inicial</p>

    <!-- Acciones -->
    <div class="card__actions">

      <button class="card__cta">Empezar curso</button>

      <button class="card__save" aria-label="Guardar curso">
        <svg class="card__save-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" /></svg>
      </button>

    </div>

  </div>

</article>

Y este es el CSS base, sin centrar nada todavía. El contenedor mide 198 px de alto y el botón es un círculo de 64 px con display: block, que será importante en la manera 1. Con este código el botón queda pegado a la esquina superior izquierda:

/* ---------- Tarjeta ---------- */

.card {
  width: min(360px, 100vw - 32px);
  padding: 12px;

  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 30px 80px -10px #000B;
}

/* ---------- Contenedor ---------- */

.card__container {
  width: 100%;
  height: 198px;

  background:
    linear-gradient(var(--accent-line), var(--accent-line)) center / 100% 1px no-repeat,
    linear-gradient(var(--accent-line), var(--accent-line)) center / 1px 100% no-repeat,
    radial-gradient(#FFFFFF1F 1px, transparent 1px) 0 0 / 16px 16px,
    var(--surface-2);
  border-radius: 16px;
}

/* ---------- Botón play ---------- */

.card__button {
  width: 64px;
  height: 64px;
  padding: 19px;
  display: block;

  color: var(--on-accent);
  background-color: var(--accent);
  border-radius: 50%;
  box-shadow:
    0 0 0 8px var(--accent-soft),
    0 12px 40px #FF6B5780;
}

.card__icon {
  width: 100%;
  height: 100%;
  fill: currentColor;
  stroke: none;
}

A partir de aquí, cada manera es un bloque que añades al final de styles.css, bajo un comentario Centrar. Las variaciones solo tocan .card__container y .card__button; el resto de la tarjeta no cambia.

.card__container {
  display: block;
  align-content: center;
}

.card__button {
  margin-inline: auto;
}

.card__container {
  position: relative;
}

.card__button {
  position: absolute;
  inset: 0;
  place-self: center;
}

.card__container {
  position: relative;
}

.card__button {
  position: absolute;
  inset: 0;
  margin: auto;
}

.card__container {
  display: flex;
}

.card__button {
  margin: auto;
}

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

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

.card__container {
  display: grid;
}

.card__button {
  place-self: center;
}

.card__container {
  position: relative;
}

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

Cuál elegir según el caso

• Un elemento o varios, y quieres lo más corto: Grid con place-items: center (manera 6).
• Solo un hijo debe centrarse: Grid con place-self: center (manera 7) o Flexbox con margin: auto (manera 4).
• Ya usas Flexbox para alinear el resto: justify-content y align-items (manera 5).
• El elemento debe flotar sobre otro, como un botón sobre una imagen o un modal: position: absolute con inset: 0 y margin: auto (manera 3).
• No quieres activar ningún modelo de maquetación: align-content con margin-inline: auto (manera 1).

Preguntas frecuentes

¿Cuál es la mejor forma de centrar un div en CSS?

Depende del caso, pero la más corta y fácil de recordar es Grid: display: grid con place-items: center en el padre. Si necesitas que el elemento salga del flujo, como un modal o un botón sobre una imagen, usa position: absolute con inset: 0 y margin: auto.

¿Se puede centrar en CSS sin Flexbox ni Grid?

Sí. Con align-content: center en el contenedor y margin-inline: auto en el hijo, el elemento queda centrado aunque el display sea block. También se puede con position: absolute, inset: 0 y margin: auto, sin activar ningún modelo de maquetación.

¿Cómo centrar vertical y horizontalmente con CSS?

Con Flexbox usas justify-content: center y align-items: center. Con Grid, place-items: center. Con posición absoluta, inset: 0 y margin: auto. En todos los casos, el contenedor necesita una altura mayor que la del elemento para que haya espacio que repartir.

¿Para qué sirve place-items en CSS?

Es la abreviatura de align-items y justify-items. En un contenedor con display: grid coloca todos los hijos dentro de su celda, en vertical y en horizontal a la vez. Con place-items: center se centran los dos ejes con una sola línea.

¿Por qué no se centra mi elemento en CSS?

Casi siempre es una de tres cosas: el contenedor no tiene más alto que el elemento y no hay espacio que repartir, en un contenedor normal (display: block) el hijo es inline, como un <a> o un <span>, y margin: auto no le afecta (dale display: block), o la regla está en el elemento equivocado (place-items va en el padre y place-self en el hijo). Revisa también que el contenedor tenga display: flex o display: grid.

Ahora dime: ¿cuál de las 8 maneras prefieres y cuál no conocías? Déjamelo en los comentarios del video.

Más proyectos

• CSS Grid vs position absolute: cuándo usar cada uno
• Cómo crear un dropdown menú con CSS
• 3 características que no conocías de CSS