Cómo centrar un div con Flexbox en CSS

El problema clásico

Centrar un elemento horizontal y verticalmente ha sido históricamente uno de los desafíos más comunes en CSS. Con Flexbox, la solución es elegante y limpia.

Solución rápida

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

Explicación

Ejemplo completo

<div class="contenedor">
  <div class="centrado">¡Estoy centrado!</div>
</div>

<style>
.contenedor {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.centrado {
  background: #4f46e5;
  color: white;
  padding: 2rem;
  border-radius: 8px;
}
</style>

Variante: Centrar solo horizontalmente

.solo-horizontal {
  display: flex;
  justify-content: center;
}

Variante: Centrar solo verticalmente

.solo-vertical {
  display: flex;
  align-items: center;
}

Compatibilidad

Flexbox tiene soporte del 98%+ en todos los navegadores modernos. No necesitas prefixes de vendedor para la mayoría de los casos de uso.

¿Cuándo usar Grid en su lugar?

Si necesitas centrar elementos dentro de un grid más complejo, display: grid con place-items: center también funciona:

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