Centrar en CSS

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

Adam Argyle

Centrarse en CSS es un desafío infame, plagado de bromas y burlas. 2020 CSS creció y ahora podemos reírnos honestamente de esas bromas, no apretando los dientes.

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

El desafío

Hay diferentes tipos de centrado. A partir de diferentes casos de uso, cantidad de elementos para centrar, etc. Con el fin de demostrar la lógica detrás de la técnica de centro "ganador", creé The Resilience Ringer. Se trata de una serie de pruebas de esfuerzo para cada estrategia central que se debe equilibrar y que permite observar su rendimiento. Al final, revelo la técnica de puntuación más alta, así como la técnica de “más valioso”. Esperamos que te lleves con nuevas técnicas y soluciones de centrado.

El timbre de la resiliencia

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

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

La solución ganadora debe demostrar su resiliencia manteniendo el contenido en el centro mientras se aprieta, aprieta, duplica, edita y cambia a varios modos de lenguaje y direcciones. Un centro confiable y resiliente,

Leyenda

Proporcioné algunos consejos de color visuales para ayudarte a mantener la metainformación en contexto:

• Un borde rosa indica la propiedad de los estilos centrados.
• 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 centrar en los tamaños de cuadros secundarios (si los hay).

Los 5 concursantes

En el timbre de resiliencia, solo se recibe la Corona de resiliencia 5 técnicas de centrado Ъ.

1. Centro de contenido

Edición y duplicación de contenido con VisBug

1. Squish: ¡Genial!
2. Squash: ¡Genial!
3. Duplicado: ¡genial!
4. Edición: Perfecto.
5. Fluir: ¡Excelente!

Será difícil superar la brevedad de display: grid y la abreviatura place-content. Dado que centra y justifica a los niños colectivamente, es una técnica de centro sólida para grupos de elementos que deben leerse.

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

Ventajas

• El contenido se centra incluso en espacios limitados y desbordamientos.
• Centrar las ediciones y el mantenimiento en un solo lugar
• La brecha 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 el resto. Esto se analizará con más detalle en Gentle Flex.

Ideal para diseños macro que contienen párrafos y títulos, prototipos o, en general, elementos que necesitan un centro 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. Flexión suave

1. Squish: ¡Genial!
2. Squash: ¡Genial!
3. Duplicado: ¡Fantástico!
4. Edición: ¡Excelente!
5. Fluir: ¡Genial!

Gentle Flex es una verdadera estrategia centrada únicamente. Es suave y delicado porque, a diferencia de place-content: center, no se cambian los tamaños de caja de los elementos secundarios durante el enfoque. Con la mayor suavidad posible, todos los elementos se apilan, se centran y se separan.

.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 están en un solo lugar
• La brecha garantiza un espaciado igual entre n elementos secundarios.

Desventajas

• La mayoría de las líneas de código

Ideal para diseños macro y micro.

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

3. Autobot

1. Squish: Genial
2. Squash: Genial
3. Duplicado: bien
4. Edición: Perfecto
5. Flujo: Excelente.

El contenedor está configurado para ser flexible sin estilos de alineación, mientras que los elementos secundarios directos tienen ajustes de estilo con márgenes automáticos. Hay algo nostálgico y maravilloso en margin: auto que trabaja 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 desborda
• La dependencia en la distribución, en lugar de la brecha, significa que pueden ocurrir diseños con los niños que tocan los lados.
• Que se le "empuje" a la posición no parece óptimo y puede provocar un cambio en el tamaño de la caja del elemento secundario.

Ideal para centrar íconos o pseudoelementos.

4. Centro esponjoso

1. Aplastamiento: malo
2. Squash: malo
3. Duplicada: incorrecta
4. Edición: ¡Excelente!
5. Fluir: ¡Genial! (siempre y cuando uses propiedades lógicas).

El "centro esponjoso" de los participantes es, por mucho, nuestro competidor con el que suena más sabroso, y es la única técnica de centro que solo pertenece a un elemento o niño. ¿Ves nuestro borde rosa interior como solista?

.fluffy-center {
  padding: 10ch;
}

Ventajas

• Protege el contenido
• Explosión atómica
• Cada prueba contiene secretamente esta estrategia de centrado
• El espacio entre palabras es un déficit

Desventajas

• Ilusión de no ser útil
• El contenedor y los artículos no coinciden, porque cada uno tiene el tamaño

Ideal para centrados centrados en palabras o frases, etiquetas, pastillas, botones, chips y mucho más.

5. Pop y trap

1. Squish: De acuerdo
2. Squash: De acuerdo
3. Duplicada: incorrecta
4. Editar: bien
5. Flujo: correcto

Este se "resalta" porque el posicionamiento absoluto quita el elemento del flujo normal. La parte de "plop" de los nombres viene de cuando me parece más útil: ponerlo encima de otras cosas. Es una técnica clásica y práctica de centro de superposición que es flexible y dinámica según el tamaño del contenido. A veces, solo necesitas ubicar la IU sobre otra IU.

Ventajas

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

Desventajas

• Código con valores porcentuales negativos
• 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

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

Ganador

Si estuviera en una isla y solo pudiera tener 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;
}

Puedes encontrarlo en mis hojas de estilo porque es útil tanto para los diseños macro como para micro. Es una solución confiable con resultados que coinciden con mis expectativas. Además, debido a que soy un adicto a los tallas intrínsecas, tiendo a pasar a esta solución. Es cierto que es mucho lo que hay que escribir, pero los beneficios que proporciona superan al código adicional.

MVP

Centro flexible

.fluffy-center {
  padding: 2ch;
}

Esponjoso Center es tan micro que es fácil de pasar por alto como una técnica de centrado, pero es un elemento básico de mis estrategias de centrado. Es tan atómico que a veces me olvido de usarlo.

Conclusión

¿Qué situaciones rompen tus estrategias de centrar? ¿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 desarrollar en la web. Sigue el codelab que se incluye en esta publicación para crear tu propio ejemplo de centrado, como los que se muestran en esta publicación. Twitteatu versión y la agregaré a la sección Remixes de la comunidad a continuación.

Remixes de la comunidad

• Trucos de CSS con una entrada de blog