Cómo centrar un DIV: de lo antiguo a lo moderno

Centrar un div horizontalmente en la página es una de las tareas más comunes (y a veces frustrantes) en desarrollo web. A lo largo de los años, han existido distintos métodos para lograrlo. En este post, repasaremos cinco enfoques, desde el más antiguo y desaconsejado hasta las técnicas modernas y recomendadas.

---

1. La etiqueta <center> (obsoleta)

En los albores de HTML, existía una etiqueta específica para centrar contenido: <center>.

<center>
  <div>Mi contenido centrado</div>
</center>

✅ ¿Funcionaba? Sí.
❌ ¿Se debe usar hoy? ¡No!

La etiqueta <center> fue obsoleta en HTML5 porque mezcla contenido con presentación, violando el principio de separación entre HTML (estructura) y CSS (estilo). Los navegadores modernos aún la soportan por compatibilidad, pero nunca debes usarla en proyectos actuales.

---

2. text-align: center

Muchos principiantes intentan usar text-align: center directamente en el div que quieren centrar:

.mi-div {
  text-align: center;
}

Pero… esto no centra el div, sino su contenido inline (texto, imágenes, , etc.).

¿Cuándo sí funciona para centrar un div?

Solo si el div es hijo de un contenedor con text-align: center y él mismo tiene display: inline-block:

<div class="contenedor">
  <div class="caja">¡Centrado!</div>
</div>

.contenedor {
  text-align: center;
}

.caja {
  display: inline-block;
  padding: 20px;
  background: lightcoral;
}

⚠️ Limitación: No es ideal para layouts complejos y depende del comportamiento de elementos inline.

---

3. El hack de position + transform (clásico absoluto)

Este método es muy útil cuando necesitas centrar un elemento absolutamente posicionado, especialmente si su tamaño es desconocido o dinámico.

.contenedor {
  position: relative;
  height: 100vh;
}

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

<div class="contenedor">
  <div class="caja">Centrado con transform</div>
</div>

¿Cómo funciona?

top: 50% y left: 50% mueven la esquina superior izquierda del elemento al centro del contenedor.
transform: translate(-50%, -50%) desplaza el elemento hacia atrás la mitad de su propio ancho y alto, logrando un centrado perfecto.
✅ Funciona sin conocer el tamaño del elemento.
✅ Compatible incluso con navegadores antiguos (IE9+).
⚠️ Requiere position: relative (o similar) en el contenedor padre.

---

4. margin: auto (el clásico confiable)

Este es el método tradicional para centrar bloques con ancho definido:

.centrado {
  width: 300px;
  margin-left: auto;
  margin-right: auto;
  /* o simplemente: */
  margin: 0 auto;
}

✅ Ventajas:

• Simple y ampliamente soportado (incluso en navegadores muy antiguos).
• No requiere cambios en el contenedor padre.

❌ Limitaciones:

• Solo funciona si el elemento tiene un ancho explícito (no width: auto).
• Solo centra horizontalmente (para vertical, se necesitan trucos adicionales).

---

5. Flexbox (moderno y flexible)

Con Flexbox, centrar elementos se vuelve intuitivo y potente:

.contenedor {
  display: flex;
  justify-content: center; /* centrado horizontal */
  /* align-items: center;  ← para centrado vertical también */
}

<div class="contenedor">
  <div class="caja">Centrado con Flexbox</div>
</div>

✅ Ventajas:

• Funciona sin necesidad de ancho fijo.
• Permite centrado horizontal, vertical o ambos.
• Soporte excelente en navegadores modernos.

💡 Consejo: Es ideal para layouts de una sola dimensión (filas o columnas).

---

6. CSS Grid (el futuro ya está aquí)

Grid es aún más poderoso, especialmente para layouts bidimensionales:

.contenedor {
  display: grid;
  place-items: center; /* centra horizontal Y verticalmente */
}

O, de forma más explícita:

.contenedor {
  display: grid;
  justify-content: center;
  align-content: center;
}

✅ Ventajas:

• Centrado preciso en dos dimensiones.
• Control total sobre filas y columnas.
• Código limpio y declarativo.

🌐 Soporte: Total en todos los navegadores modernos (Chrome, Firefox, Safari, Edge).

Resumen: ¿Cuál método usar?

MÉTODO	CENTRADO HORIZONTAL	CENTRADO VERTICAL	RECOMENDADO	RECOMENDADO
<center>	✅ Sí	❌ No	❌ No	Nunca
text-align	Solo con inline-block	❌ No	⚠️ Limitado	Contenido inline
position + transform	✅ Sí	❌ No	✅ Sí	Overlays, modales, elementos absolutos
margin: auto	✅ Sí (con ancho)	✅ Sí	✅ Sí	Bloques simples
Flexbox	✅ Sí	✅ Sí	✅✅ Sí	Layouts modernos
Grid	✅ Sí	✅ Sí	✅✅✅ Sí	Layouts complejos

---

Conclusión

Hoy en día, Flexbox y Grid son las mejores opciones para la mayoría de los casos. Pero el hack con transform sigue siendo invaluable para modales, tooltips o cualquier elemento que deba posicionarse de forma absoluta en el centro de la pantalla.

Elige el método que mejor se adapte a tu contexto, y trata de evitar siempre que puedas usar la etiqueta <center>.

¿Tienes un método favorito? ¡Déjalo en los comentarios!