Высота и вертикальное выравнивание

Высота родительского элемента должна иметь статическое значение (т. е. не автоматическое или процентное). Если высота не указана, браузер вычислит ее на основе содержимого, что может привести к неожиданным результатам.

Позиционирование встроенных элементов

В отличие от выравнивания текста , которое применяется к содержащему элементу на уровне блока, вертикальное выравнивание должно быть применено к строчному элементу, который вы хотите позиционировать.

Различия браузеров

Старые браузеры могут не работать последовательно поддерживать вертикальное выравнивание. Однако современные браузеры хорошо справляются с этим, даже если они используются с нестрочными элементами.

Пример: центрирование текста

Например, предположим, что у вас есть следующий HTML:

Чтобы центрировать текст по вертикали в #inner, примените вертикальное выравнивание: middle к #header:
#header {
  display: inline-block;
  line-height: 1em;
  margin: 0;
  vertical-align: middle;
}
Обратите внимание, что в этом примере #inner — это элемент встроенного блока фиксированной высоты.