Cómo centrar cualquier cosa con CSS moderno

Centrar en CSS tiene fama de ser más difícil de lo que debería. Intentas text-align: center en un div, nada se mueve. Agregas margin: auto, el elemento se centra horizontalmente pero no verticalmente. Buscas una solución, encuentras cinco respuestas diferentes y ninguna explica por qué funcionan.

El problema real es que CSS tiene múltiples contextos de diseño, y cada uno maneja la alineación de manera diferente. Una vez que comprendes en qué contexto estás trabajando, centrar se vuelve sencillo. Esto es lo que realmente funciona hoy en día.

Comprende primero el contexto de diseño

Antes de elegir una técnica, hazte una pregunta: ¿qué sistema de diseño está usando el elemento padre?

El centrado se comporta de manera diferente en el diseño de flujo, Flexbox y Grid. Aplicar el método incorrecto en el contexto equivocado es la razón por la que centrar se siente inconsistente. Los tres escenarios que encontrarás con más frecuencia son:

• Centrar contenido en línea (texto, enlaces) dentro de un bloque
• Centrar un elemento de bloque horizontalmente dentro de su padre
• Centrar un elemento tanto horizontal como verticalmente

Centrar contenido en línea con text-align

Para texto, enlaces y otros elementos en línea, text-align: center en el padre es todo lo que necesitas:

.card-header {
  text-align: center;
}

Esto solo afecta al contenido en línea dentro del contenedor. No moverá el contenedor en sí. Un error común es aplicar text-align: center esperando que un div cambie de posición — no lo hará.

Centrado horizontal con margin-inline: auto

Para centrar un elemento de bloque horizontalmente dentro de su padre, usa márgenes automáticos. La forma moderna de escribir esto utiliza propiedades lógicas:

.content {
  width: 680px;
  margin-inline: auto;
}

margin-inline: auto es equivalente a margin-left: auto; margin-right: auto, pero respeta la dirección de escritura, lo cual es importante para diseños internacionalizados. Esta es la herramienta adecuada para centrar contenedores de página, contenedores de artículos y formularios. El elemento debe ser más estrecho que su contenedor para que haya espacio horizontal restante que los márgenes automáticos puedan distribuir.

Centrado con CSS Flexbox: horizontal y vertical

Flexbox es la técnica de centrado en CSS moderno más práctica para alinear elementos dentro de un contenedor, especialmente cuando tienes múltiples hijos o necesitas control direccional:

.container {
  display: flex;
  justify-content: center; /* horizontal */
  align-items: center;     /* vertical */
  min-height: 100dvh;
}

Nota: Usa min-height: 100dvh en lugar de height: 100vh para diseños de pantalla completa. La unidad dvh tiene en cuenta la interfaz dinámica del navegador en móviles (barras de direcciones, barras de herramientas), lo cual 100vh no maneja correctamente. Las unidades de viewport dinámico ahora tienen amplio soporte en navegadores modernos y se pueden consultar en https://webstatus.dev/features/viewport-unit-variants.

justify-content controla la alineación a lo largo del eje principal. align-items controla el eje transversal. Juntos centran cualquier elemento hijo independientemente de sus dimensiones. Esta es la opción correcta cuando estás centrando múltiples elementos o necesitas control de espaciado y dirección.

Centrado con CSS Grid: el camino más corto

Para centrar un solo elemento dentro de un contenedor, CSS Grid con place-items es la opción más concisa:

.wrapper {
  display: grid;
  place-items: center;
  min-height: 100dvh;
}

place-items: center es la forma abreviada de align-items: center y justify-items: center. Centra el hijo en ambos ejes con dos declaraciones. Si solo necesitas centrar un elemento y no necesitas lógica de diseño compleja, este es el enfoque más limpio.

También puedes aplicar el centrado desde el lado del hijo usando place-self: center o margin: auto en un elemento de grid, lo cual es útil cuando no controlas el CSS del padre.

¿Qué método deberías usar?

Una nota sobre las nuevas capacidades de CSS

CSS Anchor Positioning te permite alinear un elemento en relación con otro elemento específico — útil para tooltips, popovers e interfaces adjuntas. La característica recientemente alcanzó disponibilidad en navegadores modernos y se puede consultar en https://webstatus.dev/features/anchor-positioning. Sin embargo, para el centrado general de páginas, Flexbox y Grid siguen siendo el estándar confiable que los desarrolladores usan hoy en día.

Conclusión

Centrar en CSS deja de ser frustrante una vez que ajustas la técnica al contexto de diseño. Usa margin-inline: auto para diseño de flujo horizontal, Flexbox cuando alineas múltiples elementos, y Grid place-items: center cuando solo necesitas algo en el medio. Eso cubre la gran mayoría de lo que encontrarás en el trabajo frontend real.

Preguntas frecuentes

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.