Почему свойство vertical-align не всегда работает должным образом для абсолютных и фиксированных элементов?

Свойство vertical-align не всегда работает должным образом для абсолютных и фиксированных элементов, потому что оно влияет на выравнивание самого элемента, а не его содержимого (кроме случаев, когда применяется к ячейкам таблицы). web-standards.ru habr.com

Применение свойства position: absolute автоматически присваивает блоку свойство display: block, что может приводить к проблемам с вертикальным выравниванием. ru.stackoverflow.com

Для решения проблемы можно попробовать использовать другие техники, например:

• Выравнивание с помощью таблицы. habr.com Нужно заменить внешний блок таблицей из одной ячейки. habr.com В этом случае выравнивание будет применяться к содержимому ячейки, то есть к внутреннему блоку. habr.com
• Выравнивание с помощью отступов. habr.com Для абсолютно позиционированных элементов с известной высотой (например, иконок) подойдёт способ с отрицательным свойством margin-top. habr.com
• Выравнивание с помощью псевдоэлемента. habr.com Универсальный способ, который может применяться, когда неизвестны высоты обоих блоков. habr.com Суть способа в добавлении внутри внешнего блока строчного блока inline-block высотой в 100% и задания ему вертикального выравнивания. habr.com В этом случае высота добавленного блока будет равна высоте внешнего блока, а внутренний блок выровняется по вертикали относительно добавленного, а значит, и внешнего блока. habr.com