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

El centrado en CSS es un desafío notorio, lleno de bromas 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 que cada estrategia de centrado se equilibre y puedas 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 centrado debe ser resiliente 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 centrado debería 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:

• Un borde rosa indica la propiedad de los estilos de centrado.
• El cuadro gris es el fondo del contenedor que busca tener 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

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;
}

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

2. Flex 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 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;
}

Excelente para diseños macro y micro.

3. Autobot

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

El contenedor se configura como flexible sin estilos de alineación, mientras que los elementos secundarios directos se ajustan 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;
}

Es ideal para centrar íconos o pseudoelementos.

4. Centro esponjoso

1. Aplastamiento: malo
2. Squash: malo
3. Duplicate: malo
4. Edit: ¡Excelente!
5. Flujo: ¡Excelente! (siempre que uses 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;
}

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

5. Pop y Plop

1. Aplastamiento: De acuerdo.
2. Squash: De acuerdo.
3. Duplicate: Malo
4. Edit: bien
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 superposición que es flexible y dinámica en función del tamaño del contenido. A veces, solo necesitas colocar la IU sobre otra.

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 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