Adam Argyle tiene una publicación en web.dev investigando esto. Comienza con la suposición de que es necesario realizar un centrado vertical y un centrado horizontal. Es ese centrado vertical lo que tradicionalmente ha sido un poco más complicado para la gente, particularmente cuando se desconoce la altura del contenido.
Tenemos una guía completa de centrado que cubre una amplia variedad de situaciones, como un árbol de decisiones.
Detalles de Adam cinco(!) métodos para manejarlo, incluso para centrar dimensiones verticales y horizontales desconocidas, además de un puñado de otras restricciones como la dirección del lenguaje y múltiples elementos. Supongo que todos los chistes tontos sobre la dificultad de centrar las cosas en CSS deben actualizarse. Tal vez deberían burlarse de cuántas formas excelentes hay de centrar las cosas en CSS.
Adam hace un gran trabajo enumerando los pros y los contras de todas las técnicas y demostrándolas claramente. También hay un video. Él elige “la flexión suave” como el enfoque ganador:
.gentle-flex {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1ch;
}Siempre puedes encontrarlo en mis hojas de estilo porque es útil tanto para diseños macro como micro. Es una solución completa y confiable con resultados que coinciden con mis expectativas. Además, como soy un adicto al tamaño intrínseco, tiendo a graduarme en esta solución. Es cierto que es mucho para escribir, pero los beneficios que proporciona superan el código adicional.
Recuerde que cuando se está “centrando en CSS” no siempre es en estas situaciones extremas. Veamos otra situación, solo por diversión. Digamos que necesitas centrar horizontalmente algunos inline-*¹ elementos … text-align: center; te lleva allí como una sola línea:
Pero, ¿qué sucede si necesita centrar el elemento principal de esos elementos? Pensarías que podrías hacer un clásico margin: 0 auto; cosa, y puede, pero es probable que el padre sea a nivel de bloque y, por lo tanto, sea de ancho completo o tenga un ancho fijo. En cambio, diga que quiere que sea tan amplio como el contenido que contiene. Podrías hacer que el padre inline-*, pero luego necesita otro padre en el que establecer el text-align para centrarlo.
Stefan Judis habló de esto recientemente. El truco consiste en dejar el elemento a nivel de bloque, pero usar width: fit-content;
La vieja flexión suave probablemente también podría haberse involucrado aquí, pero necesitaríamos un padre adicional nuevamente. Siempre hay algo en lo que pensar.
- Lo que quiero decir con
inline-*es:inline,inline-block,inline-flex,inline-grid, oinline-table. ¿Me perdí alguno?
Enlace directo →