Esbarrei com uma dica do designer [Andreas Storm](https://twitter.com/avstorm) sobre como alinhar corretamente elementos usando uma técnica que ele chamou de **optical fit** (encaixe ótico).

A estratégia consiste em borrar por completo um elemento (ícones ou textos) para ocupar o seu _"real espaço ótico"_ e usar isto para alinhar ele no limite das bordas de um container. Veja o GIF abaixo:

![Alinhando elementos com "optical fit" ou "encaixe ótico"](https://i.imgur.com/q3193tq.gif)

Para uma animação em maior resolução e qualidade, sugiro entrar no link que está na **Fonte**.

Caraca Champs, isso é coisa de outro mundo.

Sempre apanhei com alinhamento de itens e jurava que os `align-items-center` já resolvia.

na animação ele alinhou o elemento com o padding, sendo padding X e Y o mesmo valor

importante  checar se o elemento n tem espaço a mais do que ele deveria

Muito interessante, é uma tecnica mais exata para o que fazemos geralmente no olho.

Dica rápida para alinhamento de Ícones, Textos ou qualquer outro Elemento dentro de um Layout

Esbarrei com uma dica do designer Andreas Storm sobre como alinhar corretamente elementos usando uma técnica que ele chamou de optical fit (encaixe ótico). A estratégia consiste em borrar...