Centrar en CSS

Sigue 5 técnicas de centrado mientras se someten a una serie de pruebas para ver cuál es la más resistente a los cambios.

Adam Argyle

Centrar en CSS es un desafío notorio, lleno de bromas y burlas. 2020 CSS ya es un lenguaje maduro y ahora podemos reírnos de esos chistes con sinceridad, no con los dientes apretados.

Si prefieres el formato de video, aquí tienes una versión de YouTube de esta publicación:

El desafío

Existen diferentes tipos de centrado. Desde diferentes casos de uso, cantidad de elementos que se deben centrar, etc. Para demostrar el fundamento de una técnica de centrado "ganadora", creé The Resilience Ringer. Es una serie de pruebas de esfuerzo para cada estrategia de centrado para equilibrar y observar su rendimiento. Al final, revelo la técnica con la puntuación más alta, así como la "más valiosa". Esperamos que te vayas con nuevas técnicas y soluciones de centrado.

El timbre de la resiliencia

El Resilience Ringer 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 dar forma a las siguientes pruebas de resiliencia para que las técnicas de centrado perduren:

1. Comprimido: El centrado debería poder controlar los cambios en el ancho.
2. Aplastado: El centrado debería poder controlar los cambios de altura.
3. Duplicado: La alineación centrada debe ser dinámica según la cantidad de elementos
4. Edit: centering should be dynamic to length and language of content
5. Flujo: La alineación centrada debe ser independiente de la dirección del documento y del modo de escritura.

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

Legend

Proporcioné algunas sugerencias visuales de color para ayudarte a mantener cierta 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

Cinco técnicas de concentración entran al ring de la resiliencia, pero solo una recibirá la corona de la resiliencia 👸.

1. Centro de contenido

Edita y duplica contenido con VisBug

1. Squish: ¡Excelente!
2. Squash: ¡Genial!
3. Duplicado: ¡Excelente!
4. Editar: ¡Excelente!
5. Flow: ¡Genial!

Será difícil superar la concisión de display: grid y la notación abreviada de place-content. Como centra y justifica los elementos secundarios de forma colectiva, es una técnica de centrado sólida para grupos de elementos que se deben leer.

.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 se centralizan en un solo lugar.
• Gap garantiza un espaciado igual 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 todos los demás. Esto se analizará con más detalle en Flexibilidad moderada.

Es ideal para diseños macro que contienen párrafos y encabezados, 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 las abreviaturas de place-content y place-item.

2. Gentle Flex

1. Squish: ¡Excelente!
2. Squash: ¡Excelente!
3. Duplicar: ¡Excelente!
4. Edit: ¡Excelente!
5. Flow: ¡Excelente!

Gentle Flex es una estrategia de centrado únicamente más real. Es suave y delicado, ya que, a diferencia de place-content: center, no se cambia el tamaño de las cajas de los elementos secundarios durante el centrado. Con la mayor delicadeza posible, todos los elementos se apilan, se centran y se espacian.

.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 realizan en un solo lugar
• Gap garantiza un espaciado igual entre n elementos secundarios

Desventajas

• La mayoría de las 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 muy amplias y de alto nivel. Las zonas que crean los diseños macro suelen contener más diseños. Cuanto menos superficie cubra el diseño, menos se convertirá en un diseño macro. A medida que un diseño cubre 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: Bien
4. Edición: Excelente
5. Flujo: Excelente

El contenedor se configura como flex sin estilos de alineación, mientras que los elementos secundarios directos tienen márgenes automáticos. Hay algo nostálgico y maravilloso en margin: auto trabajar en todos los lados del elemento.

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

Ventajas

• Truco divertido
• Rápido y sucio

Desventajas

• Resultados extraños cuando se desborda
• La dependencia de la distribución en lugar del espacio significa que los diseños pueden ocurrir con elementos secundarios que tocan los lados.
• "Empujar" un elemento a una posición no parece óptimo y puede provocar un cambio en el tamaño del cuadro del elemento secundario.

Excelente para centrar íconos o seudoelementos.

4. Centro de Fluffy

1. Aplastamiento: malo
2. Squash: malo
3. Duplicado: malo
4. Edit: ¡Excelente!
5. Flow: ¡Excelente! (siempre que uses propiedades lógicas)

El participante "fluffy center" es, por lejos, nuestro contendiente más sabroso y es la única técnica de centrado que pertenece por completo al elemento o elemento secundario. ¿Ves nuestro borde rosa interior?

.fluffy-center {
  padding: 10ch;
}

Ventajas

• Protege el contenido
• Explosión atómica
• Cada prueba contiene en secreto esta estrategia de centrado
• El espacio entre palabras es un espacio vacío

Desventajas

• Ilusión de no ser útil
• Hay un conflicto entre el contenedor y los elementos, ya que cada uno es muy estricto con su tamaño.

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

5. Pop y Plop

1. Squish: De acuerdo.
2. Squash: De acuerdo.
3. Duplicado: malo
4. Edición: Buena
5. Flujo: correcto

Esto "salta" porque el posicionamiento absoluto hace que el elemento salga del flujo normal. La parte "plop" de los nombres proviene de cuando me resulta más útil: colocarlo encima de otras cosas. Es una técnica clásica y práctica para centrar superposiciones que es flexible y dinámica según el tamaño del contenido. A veces, solo necesitas colocar una IU sobre otra.

Ventajas

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

Desventajas

• Código con valores de porcentaje negativos
• Requiere position: relative para forzar un bloque contenedor
• Saltos de línea anticipados y extraños
• Solo puede haber 1 por bloque contenedor sin esfuerzo adicional

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

Ganador

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

[redoble de tambores]

Gentle Flex 🎉

.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 los diseños macro y micro. Es una solución confiable en todos los aspectos, con resultados que cumplen con mis expectativas. Además, como soy un fanático del tamaño intrínseco, suelo recurrir a esta solución. Es cierto que es mucho para escribir, pero los beneficios que proporciona superan el código adicional.

MVP

Fluffy Center

.fluffy-center {
  padding: 2ch;
}

Fluffy Center es tan micro 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 cosas rompen tus estrategias de centrado? ¿Qué otros desafíos podrían agregarse a la prueba 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 tú? Diversifiquemos nuestros enfoques y aprendamos todas las formas de crear en la Web. Sigue el codelab con esta publicación para crear tu propio ejemplo de centrado, como los de esta publicación. Envíame un tweet con tu versión y la agregaré a la sección Remixes de la comunidad que aparece más abajo.

Remixes de la comunidad

• CSS Tricks con una entrada de blog