Cómo centrar un div en CSS

Artículo original ↗ Discusión en Hacker News ↗

Centrar elementos en CSS se convierte en una lente para una frustración más amplia con el modelo de maquetación de la web: muchos recuerdan lo trivial que era antes con etiquetas `<center>` y diseños basados en tablas, y lo contrastan con la mezcla actual de flexbox, grid y reglas matizadas del box model. Los comentaristas señalan que CSS moderno por fin ofrece formas potentes y nativas de centrar y alinear contenido, pero sostienen que el modelo mental, la terminología y las peculiaridades heredadas de navegadores hacen que parezca mucho más complejo que los frameworks de UI de escritorio o el HTML temprano. Debajo de las bromas y la nostalgia hay puntos serios sobre accesibilidad, diseño responsivo en distintos dispositivos y si los estándares web en evolución han intercambiado simplicidad por flexibilidad de una manera que era inevitable o en gran parte autoinfligida.

Enfoques heredados de HTML (<center>, tablas)

  • Muchos recuerdan que centrar era trivial con <center> y los diseños basados en tablas, y contrastan eso con la complejidad de CSS.
  • Algunos sostienen que <center> no era “tan malo” para casos comunes y que los navegadores todavía soportan de forma efectiva su comportamiento internamente.
  • Otros subrayan que no era semántico, era limitado (sobre todo solo horizontalmente) y con razón quedó obsoleto en favor de CSS.
  • Las tablas para maquetación se recuerdan como algo que “realmente funcionaba” y era fácil de razonar, pero se critican como una pesadilla para la accesibilidad, difíciles de mantener y no responsivas.

Por qué centrar en CSS se siente difícil

  • Centrar significa cosas distintas: horizontal vs vertical, relativo al contenedor padre vs al viewport, un solo elemento vs varios, dirección del flujo del texto, comportamiento ante el ajuste de línea.
  • Esta variedad lleva a múltiples mecanismos de CSS, no a un único interruptor de “centrar esto”.
  • Desarrolladores veteranos describen el dolor histórico: trucos previos a Flexbox, incompatibilidades con IE6 y sutiles diferencias entre navegadores.
  • Algunos dicen que la confusión viene de modelos mentales erróneos y de no entender el box model, display y posicionamiento; otros responden que, si la mayoría modela mal esto, es un fallo de diseño.

Flexbox y Grid como soluciones modernas

  • Muchos consideran que centrar es “un problema resuelto” con Flexbox y Grid (display: flex + justify-content/align-items, o display: grid + place-content: center).
  • Otros sienten que usar Flexbox/Grid solo para centrar un elemento es excesivo y no intuitivo, y ven arbitrarios nombres de propiedades como justify-content frente a align-items.
  • Hay debate sobre qué método de maquetación preferir: algunos usan Flexbox para casi todo; otros dicen que Grid está infrautilizado y es mejor para grids de verdad.

Críticas a la complejidad de CSS y su diseño

  • Varios llaman a CSS un “miasma” o una “catástrofe”: reglas superpuestas, especificidad, herencia y muchos modelos de maquetación parcialmente solapados.
  • Otros defienden la complejidad como reflejo de la verdadera dificultad de la maquetación automática en viewports y tamaños de contenido desconocidos.
  • Se hacen comparaciones con frameworks de UI de escritorio y juegos, afirmando que resolvieron la maquetación antes o de forma más limpia; las réplicas dicen que no enfrentan las mismas exigencias de multiplataforma, accesibilidad y anulaciones por parte del usuario.

Semántica, accesibilidad y uso en el mundo real

  • Fuerte hilo argumental de que usar tablas para maquetación y hacer un mal uso de elementos HTML perjudica a los lectores de pantalla y ata el orden del DOM a la presentación.
  • Los contraargumentos dicen que la pureza semántica está sobrevalorada y que herramientas como Tailwind o las maquetaciones con tablas siguen siendo prácticas.

Reacciones al artículo y al sitio

  • El artículo fue ampliamente elogiado como la mejor y más completa explicación de “centrar un div”, especialmente por sus demos interactivas.
  • A algunos no les gusta la UX del sitio (trucos de scroll, avatar/sidekick emergente), y la encuentran distractora a pesar de valorar el contenido.