El mayor problema sin resolver de la informática: centrar elementos (`centering things`)

• En las aplicaciones de muchas empresas, los elementos de UI como texto e íconos no están correctamente centrados.
• Aunque usando flex y grid de CSS se puede centrar fácilmente.

display: flex  
justify-content: center /* centrado horizontal */  
align-items: center /* centrado vertical */  

o bien

display: grid  
justify-items: center /* centrado horizontal */  
align-items: center /* centrado vertical */  

Factores que dificultan el centrado

• Las métricas de la fuente juegan un papel importante. La mayoría de las fuentes populares no tienen una caja delimitadora ajustada exactamente y dejan márgenes, lo que dificulta el centrado.
• Por el efecto de la configuración de line-height, es casi imposible alinear dos elementos que están en contenedores distintos.
• Alinear íconos junto al texto también es una tarea muy difícil. Con la propiedad vertical-align de CSS no se pueden alinear los íconos de una forma realmente útil.
• Las icon fonts, que meten los íconos dentro de archivos de fuente, hacen todavía más difícil la alineación porque no permiten ajustar tamaño ni padding.
• Los diseñadores también cometen el error de centrar de forma mecánica sin considerar la forma de los íconos.
• La alineación horizontal también puede salir mal si no se presta atención al detalle.

Soluciones

Diseñadores

• Si se ajusta la caja delimitadora de la fuente para que encaje exactamente con el texto, centrar se vuelve mucho más fácil.
• Figma ofrece esta función (aunque no viene activada por defecto).
  • Vertical Trim : Cap Height to baseline

Diseñadores de tipografías

• Si se configuran las métricas de la fuente para que el espacio entre ascender y descender sea el doble del cap-height, los desarrolladores podrán centrar con mucha más facilidad.
• No hace falta extender el ascender/descender real hasta los límites; basta con que coincidan los números.

Desarrolladores web

• Hay que conocer de antemano la fuente que se va a usar (no funciona si hay sustitución de fuentes).
• Se puede ajustar el centrado vertical añadiendo un valor de padding-bottom calculado a partir de las métricas de la fuente.
• Los íconos también pueden alinearse configurando vertical-align: baseline y desplazándolos hacia abajo según un valor calculado con las métricas de la fuente y el tamaño del ícono.

Icon fonts

• Por favor, dejen de usar icon fonts y usen formatos de imagen normales.
• No hay nada más fácil que alinear dos rectángulos con ancho y alto.

Ajuste visual

• Los desarrolladores solo pueden alinear rectángulos matemáticamente perfectos. Lo que requiere ajuste manual es colocar los íconos dentro del rectángulo de forma que se vean visualmente equilibrados.

Opinión de GN⁺

• Esto muestra que prestar atención a pequeños detalles puede mejorar mucho la calidad de una UI. Incluso algo tan aparentemente trivial como el centrado puede cambiar la sensación general.
• Más que pensar simplemente que "el diseñador se encarga solo del diseño y el desarrollador solo de la implementación", esto sugiere que hay que entender el área del otro y colaborar para lograr un buen resultado.
• Desde el principio, sería mejor ajustar las métricas de la fuente y trabajar el diseño desde la etapa de diseño, para que no haya diferencias de renderizado entre navegadores y sea más fácil implementar la intención del diseñador.
• Este tipo de problemas aparece incluso en productos de empresas tan fuertes como Apple, MS y Google, pero parece que a la mayoría de la gente le pasa desapercibido. Justamente por eso es importante obsesionarse con los detalles y construir con cuidado.
• Sobre todo ahora, con el uso reciente de herramientas de automatización para pruebas de UI y la omisión de revisiones visuales manuales, este tipo de problemas puede volverse más frecuente, así que conviene tener cuidado.

[dormis]

También vale la pena pensar si una alineación centrada mecánica realmente es lo mejor. Así como un mouse resulta más cómodo cuando tiene una forma ergonómica y ligeramente asimétrica en lugar de ser perfectamente simétrico a izquierda y derecha, quizá sea un elemento que deba decidirse viendo la usabilidad general.

[jokuhus]

Creo que el punto clave es que pueden salir resultados distintos de lo que se pretendía. Por ejemplo, una situación en la que el clic del mouse se registra no en la punta de la flecha en pantalla, sino en la parte de atrás.

[GN⁺]

Comentarios de Hacker News

Resumen:

• El layout de CSS tiene muchos problemas, y herramientas 2D/3D como programas CAD, motores de juego y programas de animación cuentan con mejores motores de layout y sistemas de restricciones
• No existe una única respuesta correcta para la alineación, y los diseñadores siempre encontrarán algo de qué quejarse
  • Incluso usando medidas de márgenes precisas, puede verse visualmente asimétrico
  • Aunque se ajuste según la forma de las letras, pueden quejarse de que no coincide con la línea base o la altura de x, entre otras cosas
• El renderizado de fuentes varía según el sistema operativo y el navegador, así que algo perfectamente alineado en un entorno puede verse desalineado en otro
• En el caso de las fuentes no occidentales, es todavía más complicado
• Incluso en el mundo real la alineación es un problema difícil (ejemplo del dibujo de la cancha de básquetbol de la NCAA)
• El criterio de alineación depende de quién lo mire
• Se presenta un sitio demo donde se pueden probar de forma interactiva justify y align de CSS
• Al colocar íconos junto a texto, un diseñador aconsejó alinearlos no solo con la fuente sino con el "centro tipográfico" del propio texto, aunque en la práctica fue necesario llegar a un compromiso
• Durante más de 10 años se ha afirmado que CSS ya alcanzó las capacidades de las tablas, pero todavía no es completamente así