Centrar en CSS

Sigue 5 técnicas de centramiento a medida que se someten a una serie de pruebas para ver cuál es la más resistente al cambio.

Adam Argyle

Centrar en CSS es un desafío muy grande y está plagado de chistes y burlas. CSS de 2020 está completamente desarrollado y ahora podemos reírnos de esos chistes con honestidad, no con los dientes apretados.

Si prefieres ver un video, aquí tienes una versión de esta publicación en YouTube:

El desafío

Existen diferentes tipos de centramiento. De diferentes casos de uso, la cantidad de elementos que se deben centrar, etcétera. Para demostrar la justificación detrás de una técnica de centrado "ganadora", creé The Resilience Ringer. Es una serie de pruebas de esfuerzo para cada estrategia de centrado que debes equilibrar y que te permita observar su rendimiento. Al final, revelo la técnica con la puntuación más alta, así como una “más valiosa”. Espero que te lleves nuevas técnicas y soluciones de centrado.

Timbre de resiliencia

El timbre de resiliencia es una representación de mis creencias de que una estrategia de enfoque debe ser resistente a los diseños internacionales, los viewports de tamaño variable, las ediciones de texto y el contenido dinámico. Estos principios ayudaron a definir las siguientes pruebas de resiliencia para que las técnicas de centrado resistan:

1. Aplastado: El centrado debería poder controlar los cambios de ancho.
2. Aplastado: el centro debe poder controlar los cambios de altura.
3. Duplicado: El centrado debe ser dinámico para la cantidad de elementos.
4. Edit: El centrado debe ser dinámico en función de la longitud y el idioma del contenido.
5. Flujo: El centrado no debe depender de la dirección del documento ni del modo de escritura.

La solución ganadora debe demostrar su capacidad de recuperación manteniendo el contenido en el centro mientras se comprime, se aplana, se duplica, se edita y se cambia a varios modos y direcciones de idioma. Un centro confiable y resiliente, un centro seguro.

Leyenda

Te proporcioné algunas sugerencias de color visuales para ayudarte a mantener la metainformación en contexto:

• El borde rosa indica la propiedad de los estilos de centrado.
• El cuadro gris es el fondo del contenedor que busca tener los elementos centrados
• Cada elemento secundario tiene un color de fondo blanco para que puedas ver los efectos que tiene la técnica de centrado en los tamaños de los cuadros secundarios (si los hay).

Los 5 concursantes

5 técnicas de centramiento ingresan al timbre de Resiliencia, solo una recibirá la corona de Resiliencia 👸.

1. Centro de contenido

Edición y duplicación de contenido con VisBug

1. Squish: ¡Genial!
2. Squash: ¡Genial!
3. Duplicate: ¡Excelente!
4. Editar: ¡Excelente!
5. Flujo: ¡Genial!

Será difícil superar la concisión de display: grid y la sigla place-content. Dado que centra y justifica los elementos secundarios de forma colectiva, es una técnica de centrado sólida para grupos de elementos destinados a la lectura.

.content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}

Ventajas

• El contenido se centra incluso en espacios limitados y desbordados
• Las ediciones y el mantenimiento de la alineación central se encuentran en un solo lugar
• Gap garantiza el mismo espaciado entre n elementos secundarios
• La cuadrícula crea filas de forma predeterminada

Desventajas

• El elemento secundario más ancho (max-content) establece el ancho para el resto. Esto se analizará con más detalle en Flexión suave.

Excelente para diseños macro que contienen párrafos y títulos, prototipos o, en general, elementos que necesitan un centrado legible.

Nota: place-content no es exclusivo de display: grid. display: flex también puede beneficiarse de los atajos place-content y place-item.

2. Flexión suave

1. Aplastamiento: ¡Excelente!
2. Squash: ¡Excelente!
3. Duplicar: ¡Genial!
4. Edit: ¡Excelente!
5. Flujo: ¡Excelente!

La Flexibilidad suave es una estrategia más auténtica de solo centrado. Es suave y gentil, ya que, a diferencia de place-content: center, no se cambian los tamaños de los cuadros de los elementos secundarios durante el centrado. Todos los elementos se apilan, centran y espacian de la manera más cuidadosa posible.

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}

Ventajas

• Solo controla la alineación, la dirección y la distribución.
• Las ediciones y el mantenimiento se encuentran en un solo lugar
• Gap garantiza el mismo espaciado entre n elementos secundarios

Desventajas

• Mayor cantidad de líneas de código

Excelente para diseños macro y micro.

Término clave: Los diseños macro son como los estados o territorios de un país: zonas de cobertura grandes y de muy alto nivel. Las zonas creadas por los diseños de macro tienden a contener más diseños. Cuanto menos superficie cubra el diseño, menos macrodiseño será. A medida que un diseño abarca menos área de superficie o contiene menos diseños, se convierte en un microdiseño.

3. Autobot

1. Aplastamiento: Excelente
2. Squash: Excelente
3. Duplicado: Se permite
4. Edit: Genial
5. Flujo: Excelente

El contenedor está configurado para ser flexible sin estilos de alineación, mientras que los elementos secundarios directos se diseñan con márgenes automáticos. Hay algo nostálgico y maravilloso en el hecho de que margin: auto funcione en todos los lados del elemento.

.autobot {
  display: flex;
}
.autobot > * {
  margin: auto;
}

Ventajas

• Truco divertido
• Rápido y sucio

Desventajas

• Resultados incómodos cuando se desbordan
• La dependencia de la distribución en lugar del espacio significa que los diseños pueden ocurrir con elementos secundarios que tocan los lados.
• No parece que sea óptimo que se “empuje” a la posición, ya que puede provocar un cambio en el tamaño del cuadro del hijo o la hija.

Ideal para centrar íconos o pseudoelementos.

4. Centro peludo

1. Aplastamiento: malo
2. Squash: malo
3. Duplicate: Malo
4. Edit: ¡Excelente!
5. Flujo: ¡Excelente! (siempre y cuando utilices propiedades lógicas)

El "centro esponjoso" del participante es, de lejos, el más atractivo y es la única técnica de centrado que es completamente propiedad del elemento o del elemento secundario. ¿Ves nuestro borde interior solo en color rosa?

.fluffy-center {
  padding: 10ch;
}

Ventajas

• Protege el contenido
• Explosión atómica
• Cada prueba contiene de forma secreta esta estrategia de centrado.
• El espacio entre palabras es un espacio

Desventajas

• Ilusión de no ser útil
• Hay una discrepancia entre el contenedor y los artículos, ya que cada uno es muy firme

Ideal para centrar palabras o frases, etiquetas, píldoras, botones, chips y mucho más.

5. Pop y Plop

1. Aplastamiento: De acuerdo.
2. Calabaza: Bien
3. Duplicate: Malo
4. Editar: correcto
5. Flujo: Fino

Esto se debe a que el posicionamiento absoluto saca el elemento del flujo normal. La parte “plop” de los nombres proviene de cuando me resulta más útil: colocarlos sobre otras cosas. Es una técnica clásica y práctica de centrado de superposiciones que es flexible y dinámica en función del tamaño del contenido. A veces, solo necesitas colocar la IU sobre otra IU.

Ventajas

• Útil
• Confiable
• Cuando la necesitas, es invaluable

Desventajas

• Código con valores porcentuales negativos
• Se requiere position: relative para forzar un bloque contenedor
• Saltos de línea incómodos y tempranos
• Solo puede haber 1 por bloque contenedor sin esfuerzo adicional.

Excelente para ventanas modales, notificaciones y mensajes, pilas y efectos de profundidad, y ventanas emergentes.

El ganador

Si estuviera en una isla y solo pudiera usar 1 técnica de centrado, sería…

[redoble de tambores]

Flexibilidad suave 🎉

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}

Siempre puedes encontrarlo en mis hojas de estilo, ya que es útil para diseños macro y micro. Es una solución confiable en todos los aspectos, con resultados que coinciden con mis expectativas. Además, como soy un adicto al tamaño intrínseco, suelo usar esta solución. Es cierto que es mucho texto para escribir, pero los beneficios que proporciona superan el código adicional.

MVP

Fluffy Center

.fluffy-center {
  padding: 2ch;
}

El centro esponjoso es tan microscópico que es fácil pasarlo por alto como técnica de centrado, pero es un elemento básico de mis estrategias de centrado. Es tan atómico que, a veces, olvido que lo estoy usando.

Conclusión

¿Qué tipos de elementos rompen tus estrategias de centrado? ¿Qué otros desafíos se podrían agregar al timbre de la resiliencia? Consideré la traducción y un interruptor de altura automática en el contenedor… ¿qué más?

Ahora que sabes cómo lo hice, ¿cómo lo harías? Diversifiquemos nuestros enfoques y aprendamos todas las formas de compilar en la Web. Sigue el codelab con esta publicación para crear tu propio ejemplo de centrado, como los que se muestran en esta publicación. Envíame tu versión por Twitter y la agregaré a la sección Remixes de la comunidad que aparece a continuación.

Remixes de la comunidad

• Trucos de CSS con una entrada de blog