Centrado en CSS

Adam Argyle tiene una publicación en web.dev que profundiza en 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, especialmente cuando se desconoce la altura del contenido.

Tenemos una guía completa para centrar que cubre una amplia variedad de situaciones como un árbol de decisión.

Adam detalla cinco (!) métodos para manejarlo, incluso centrándose en 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 es necesario actualizar todos los chistes tontos sobre la dificultad de centrar cosas en CSS. Tal vez deberían burlarse de cuántas maneras excelentes hay de centrar cosas en CSS.

Adam hace un gran trabajo enumerando los pros y los contras de todas las técnicas y demostrándolos claramente. También hay un vídeo . É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 confiable en todos los aspectos 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 hay mucho que escribir, pero los beneficios que proporciona superan el código adicional.

Recuerda que cuando te “centras en CSS” no siempre es dentro de estas situaciones extremas. Veamos otra situación, sólo por diversión. Digamos que necesitas centrar horizontalmente algunos inline-*¹ elementos… text-align: center;te lleva allí en una sola línea:

Pero ¿qué pasa si necesitas centrar el padre de esos elementos? Uno pensaría que podría hacer margin: 0 auto;algo clásico, y puede hacerlo, pero es probable que el padre esté a nivel de bloque y, por lo tanto, sea de ancho completo o tenga un ancho fijo. En lugar de eso, diga que desea que sea tan amplio como el contenido que contiene. Puede crear el padre inline-*, pero luego necesita otro padre en el que configurarlo text-alignpara centrarlo.

Stefan Judis habló de esto recientemente. El truco consiste en dejar el elemento a nivel de bloque, pero utilizarwidth: fit-content;

El viejo y gentil flexible probablemente también podría haberse involucrado aquí, pero necesitaríamos un padre adicional nuevamente. Siempre hay algo en qué pensar.

1. Lo que quiero decir con inline-*es: inline, inline-block, inline-flex, inline-grido inline-table. ¿Me perdí alguno?