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

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

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

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