Cómo centrar un div con CSS: Grid, Flexbox y transform

Centrar un elemento horizontal y verticalmente ya no requiere conocer su tamaño ni calcular márgenes negativos. CSS Grid y Flexbox permiten resolverlo con pocas propiedades y mantienen el diseño adaptable a cualquier pantalla.

Para una página o sección nueva, CSS Grid con place-items: center suele ser la opción más directa.

Centrar un div con CSS Grid

Este HTML utiliza un contenedor principal y una tarjeta. La etiqueta main aporta estructura semántica, pero la misma técnica funciona con cualquier elemento contenedor.

<main class="pagina">
  <section class="tarjeta">
    <h1>Contenido centrado</h1>
    <p>La tarjeta se adapta al ancho disponible.</p>
  </section>
</main>

.pagina {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.tarjeta {
  width: min(100%, 600px);
  padding: clamp(24px, 5vw, 56px);
}

place-items: center centra el contenido en ambos ejes. La unidad dvh se adapta mejor a las barras del navegador móvil; la línea con vh sirve como alternativa para navegadores antiguos.

La alternativa con Flexbox

Flexbox es especialmente útil cuando el contenedor ya organiza otros elementos en una fila o columna.

.pagina {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px;
}

justify-content actúa sobre el eje principal y align-items sobre el eje transversal. Con la dirección de fila predeterminada, el primero centra horizontalmente y el segundo verticalmente.

Centrar un modal o una capa sobre la pantalla

Para una ventana modal, un aviso o un indicador de carga puede usarse una capa fija que ocupe toda la ventana.

<div class="overlay">
  <div class="modal" role="dialog" aria-modal="true" aria-labelledby="titulo-modal">
    <h2 id="titulo-modal">Título del modal</h2>
    <p>Contenido centrado sobre la página.</p>
  </div>
</div>

.overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgb(0 0 0 / 55%);
}

.modal {
  width: min(100%, 520px);
}

inset: 0 equivale a establecer los cuatro bordes en cero. El centrado se realiza dentro de esa capa, no directamente respecto al documento.

Centrar con position y transform

Si no puedes convertir el contenedor en Grid o Flexbox, la combinación de posición absoluta y transformación sigue siendo válida. A diferencia del método antiguo, no necesita dimensiones fijas ni márgenes negativos.

.contenedor {
  position: relative;
  min-height: 400px;
}

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

El punto top: 50%; left: 50% coloca la esquina superior izquierda en el centro. La transformación desplaza después el elemento la mitad de su propio ancho y alto.

¿Qué método conviene utilizar?

• Grid: la solución más compacta para centrar en los dos ejes.
• Flexbox: útil cuando también necesitas controlar una fila, una columna o el espacio entre varios elementos.
• Position fixed: apropiado para modales y capas que cubren la ventana.
• Position absolute y transform: una alternativa compatible con estructuras existentes.

En todos los casos conviene evitar anchos rígidos y márgenes negativos calculados a mano. Un ancho con min(), relleno lateral y unidades de viewport mantiene el contenido centrado sin romper el diseño en pantallas pequeñas.