O maior desafio da ciência da computação: centralizar elementos (`centering things`)

• Em aplicativos de muitas empresas, elementos de UI como texto e ícones não estão devidamente centralizados
• Apesar de ser fácil centralizar usando flex e grid do CSS

display: flex  
justify-content: center /* centralização horizontal */  
align-items: center /* centralização vertical */  

ou

display: grid  
justify-items: center /* centralização horizontal */  
align-items: center /* centralização vertical */  

Fatores que dificultam a centralização

• As métricas da fonte têm um papel importante. A maioria das fontes populares não tem uma bounding box perfeitamente ajustada e possui margens, o que dificulta a centralização
• Por causa da configuração de line-height, é quase impossível alinhar dois elementos em contêineres diferentes
• Alinhar ícones ao lado de texto também é muito difícil. Com a propriedade vertical-align do CSS, não dá para alinhar ícones de forma significativa
• Fontes de ícones, em que os ícones são colocados dentro de um arquivo de fonte, tornam o alinhamento ainda mais difícil porque não permitem ajustar tamanho e padding
• Designers também cometem o erro de centralizar mecanicamente sem considerar o formato do ícone
• O alinhamento horizontal também pode dar errado se não houver atenção aos detalhes

Soluções

Designers

• Se a bounding box da fonte for ajustada exatamente ao texto, a centralização fica muito mais fácil
• O Figma oferece suporte a esse recurso (não é o padrão)
  • Vertical Trim : Cap Height to baseline

Designers de fonte

• Se as métricas da fonte forem configuradas para que o espaço entre ascender e descender seja o dobro da cap-height, os desenvolvedores conseguem centralizar com facilidade
• Não é necessário estender o ascender/descender real até os limites; basta acertar os números

Desenvolvedores web

• É preciso conhecer antecipadamente a fonte que será usada (não funciona com substituição de fonte)
• É possível acertar a centralização vertical adicionando um valor de padding-bottom calculado com base nas métricas da fonte
• Ícones também podem ser alinhados definindo vertical-align: baseline e deslocando-os para baixo pelo valor calculado a partir das métricas da fonte e do tamanho do ícone

Fontes de ícones

• Por favor, parem de usar fontes de ícones e usem formatos de imagem comuns
• Nada é mais fácil do que alinhar dois retângulos com largura e altura

Ajuste visual

• Desenvolvedores só conseguem alinhar retângulos matematicamente perfeitos. O que exige ajuste manual é posicionar o ícone dentro do retângulo de forma visualmente equilibrada

Opinião do GN⁺

• Isso mostra como a atenção aos pequenos detalhes pode melhorar bastante a qualidade da UI. Mesmo algo aparentemente trivial como centralizar pode mudar a sensação geral
• Em vez da mentalidade de que "designer cuida só do design e desenvolvedor só da implementação", isso sugere que bons resultados surgem quando ambos entendem a área um do outro e colaboram
• O ideal parece ser ajustar as métricas da fonte e produzir os layouts já na etapa de design, para que não haja diferenças de renderização entre navegadores e para facilitar a implementação fiel à intenção do designer
• Esse problema aparece até em produtos de empresas de peso como Apple, Microsoft e Google, mas parece que a maioria das pessoas passa por isso sem notar. Isso reforça como é importante criar com obsessão por detalhes minuciosos
• Especialmente agora, com o uso recente de ferramentas de automação de testes de UI, o processo de verificar tudo manualmente com o olho humano pode ser omitido, então esse tipo de problema pode se tornar ainda mais frequente e merece atenção

[dormis]

Vale pensar também se um alinhamento central mecânico é realmente algo bom. Assim como um mouse é mais confortável quando tem um design ergonômico com os lados ligeiramente diferentes, em vez de perfeitamente simétrico, talvez isso também seja algo a decidir olhando para a usabilidade como um todo.

[jokuhus]

Acho que o ponto principal é que o resultado pode acabar saindo diferente da intenção. Por exemplo, uma situação em que o clique do mouse acontece não na ponta da seta na tela, mas na parte de trás dela.

[GN⁺]

Comentários do Hacker News

Resumo:

• O layout em CSS tem muitos problemas, e ferramentas 2D/3D como programas de CAD, engines de jogos e programas de animação têm mecanismos de layout e sistemas de restrições melhores
• Não existe uma única resposta correta para alinhamento, e designers sempre vão encontrar algo para reclamar
  • Mesmo usando medidas de margem precisas, ainda pode parecer visualmente assimétrico
  • Mesmo ajustando ao formato das letras, podem reclamar que não está alinhado à baseline ou à altura-x, entre outros
• A renderização de fontes varia conforme o sistema operacional e o navegador, então algo perfeitamente alinhado em um ambiente pode ficar desalinhado em outro
• No caso de fontes não ocidentais, é ainda mais complicado
• No mundo real, alinhamento também é um problema difícil (exemplo do desenho da quadra de basquete da NCAA)
• O critério de alinhamento varia de acordo com quem está olhando
• Apresentação de um site de demonstração onde é possível testar interativamente justify e align do CSS
• Ao posicionar ícones ao lado de texto, houve o conselho de um designer para alinhar não apenas à fonte, mas também ao "centro tipográfico" do próprio texto, embora na prática tenha sido necessário fazer concessões
• Há mais de 10 anos se diz que o CSS alcançou a funcionalidade das tabelas, mas isso ainda não é completamente verdade