Cómo centrar un `div` en CSS

Cómo centrar elementos

• Colocar un elemento en el centro dentro de su elemento padre ha sido durante mucho tiempo un problema complicado.
• A medida que CSS ha evolucionado, se han ofrecido diversas soluciones y hoy en día hay muchas opciones para elegir.
• Este tutorial ayuda a entender los trade-offs entre distintos enfoques y ofrece una estrategia para manejar el centrado en todo tipo de escenarios.

Centrado con márgenes automáticos

• Cuando se quiere colocar un elemento en el centro horizontalmente, se pueden usar márgenes con el valor auto.
• Es necesario limitar el ancho del elemento, y fit-content hace que el elemento ajuste su tamaño al contenido.
• Si se usa la propiedad margin-inline, se pueden establecer al mismo tiempo margin-left y margin-right en auto.

Centrado con Flexbox

• Flexbox ofrece mucho control para distribuir grupos de ítems a lo largo del eje principal.
• Permite centrar un solo elemento tanto horizontal como verticalmente, y el centrado se mantiene incluso cuando los elementos hijos no caben dentro del contenedor.
• La propiedad flex-direction permite controlar la dirección en que se apilan varios elementos hijos.

Centrado dentro del viewport

• Hay casos en los que un elemento debe centrarse dentro del viewport y no dentro de un contenedor padre.
• Usando position: fixed e inset: 0px, se puede fijar el elemento al viewport y luego centrarlo horizontal y verticalmente con margin: auto.

Centrado de elementos con tamaño desconocido

• Cuando no se conoce explícitamente el tamaño del elemento, se puede usar fit-content para reducirlo al tamaño de su contenido.

Centrado con CSS Grid

• La forma más concisa de centrar un elemento horizontal y verticalmente con CSS Grid es usar la propiedad place-content: center.

Diferencias con Flexbox

• CSS Grid usa un algoritmo de layout diferente, y en algunos casos esa complejidad adicional puede ser un problema.
• Mientras que Flexbox calcula los porcentajes con base en el elemento padre, CSS Grid los calcula con base en la celda de la cuadrícula.

Centrado de una pila de elementos

• Con CSS Grid se pueden asignar varios elementos a la misma celda, lo que hace que se apilen de atrás hacia adelante.

Centrado de texto

• El texto recibe un tratamiento especial en CSS, y puede centrarse usando la propiedad text-align.

El futuro del centrado

• La propiedad align-content también se está implementando en el layout Flow, lo que permite controlar la alineación del contenido en la dirección de bloque.

Más allá de los patrones

• Si se entiende CSS a profundidad, se pueden resolver problemas con intuición en lugar de depender de la memoria.

Cómo decidir qué método usar

• Si quieres centrar horizontalmente un solo elemento, puedes usar la estrategia de márgenes automáticos del layout Flow.
• Para centrar una interfaz flotante como un modal o un banner, se puede usar el layout Positioned junto con márgenes automáticos.
• Para centrar una pila de elementos, se puede usar CSS Grid.
• Para centrar texto, se puede usar text-align, y también puede combinarse con otros métodos.
• En la mayoría de las demás situaciones, se puede usar Flexbox. Es el método más versátil y permite centrar uno o varios hijos en horizontal y vertical.

Opinión de GN⁺

• Lo más importante de este artículo es que ayuda a entender los distintos métodos de centrado en CSS.
• Gracias a la evolución de CSS, tareas de centrado que antes eran complejas ahora son mucho más simples, lo que resulta de gran ayuda para los desarrolladores web.
• Entender y aprovechar tecnologías modernas de CSS como Flexbox y CSS Grid se ha vuelto una habilidad esencial para el diseño web y la maquetación.

[v08zbv8fvlkjasdflkj]

Ahora que lo pienso, de repente también me molesta que en GeekNews los artículos no estén centrados ;_; jaja

[joyfui]

Yo uso mucho place-items: center;, pero veo que hay varios métodos más.

[GN⁺]

Comentarios de Hacker News

• Resumen del primer comentario:

  • Hay varias opiniones sobre por qué es difícil centrar elementos con CSS.
  • Cuando la mayoría de la gente pregunta por qué es difícil centrar algo, en realidad solo se refiere a cómo colocar un elemento exactamente en el centro de otro.
  • En el HTML del pasado se podía centrar fácilmente usando la etiqueta <table>, pero con CSS esto se siente difícil.
  • Aunque se decía que CSS era una mejor herramienta, resultaba decepcionante que ni siquiera permitiera hacer fácilmente un centrado básico.
  • Por esa razón se usaron diseños con tablas durante mucho tiempo.
  • Aun así, les gusta CSS.

• Resumen del segundo comentario:

  • Mucha gente no entiende la complejidad del layout y el formateo automáticos de páginas.
  • Es imposible abstraer toda esa complejidad en un simple "hazlo como yo quiero".
  • Se menciona como ejemplo el sitio de Gwern Branwen, señalando que es importante limitar el contenido para ajustarlo al estilo deseado.
  • El layout de una página web es un proceso complejo de presentar contenido para distintos tipos de pantalla.
  • CSS puede parecer complejo para quienes deciden crear páginas web desde cero, pero en realidad ofrece muchas opciones.
  • Para obtener el resultado deseado, hace falta encontrar la herramienta adecuada y empaquetar el contenido en la forma correcta.

• Resumen del tercer comentario:

  • Para entender el posicionamiento y el centrado en CSS, ayuda comprender el modelo de cajas.
  • Las propiedades display y position son fundamentales para aprender posicionamiento.
  • Hay un artículo útil sobre esto en MDN.

• Resumen del cuarto comentario:

  • El artículo es muy bueno, y en especial impresiona la parte interactiva.
  • Desde hace mucho tiempo usa un sitio web que facilita centrar elementos en CSS.

• Resumen del quinto comentario:

  • El "centrado" en CSS es un problema clásico.
  • CSS no es claro porque es un conjunto complejo diseñado por varios comités al mismo tiempo.
  • CSS existe como módulos individuales en medio de cambios constantes.
  • Esa no es una forma deseable de desarrollar software.

• Resumen del sexto comentario:

  • Incluso después de décadas, CSS no ha presentado un método tan efectivo como centrar con tablas.
  • Durante ese tiempo, usar tablas para layout se consideró algo vergonzoso.

• Resumen del séptimo comentario:

  • Mucha gente tiene quejas sobre CSS.
  • Un problema importante es que las instrucciones de estilo entran en conflicto entre sí o fallan sin producir ningún efecto.

• Resumen del octavo comentario:

  • Como menciona el artículo, Flexbox resuelve el problema del centrado en casos simples.
  • Cuando Flexbox no basta, generalmente es porque se está haciendo algo más complejo que un centrado simple.

• Resumen del noveno comentario:

  • Su método principal para centrar es usar position: absolute, left: 50%, transform: translateX(-50%).

• Resumen del décimo comentario:

  • Dejó el desarrollo web porque centrar un div en CSS le parecía demasiado difícil.