Как вертикально выровнять текст в div

При работе с div иногда необходимо убедиться, что текст внутри него выровнен вертикально посередине. Этого можно достичь различными методами.

Использование line-height

Если элемент div имеет фиксированную высоту, например 50 пикселей, вы можете просто использовать line-height. Свойство CSS.

#abc {
  height: 50px;
  line-height: 50px;
}

Это центрирует текст внутри элемента div по вертикали.

Использование свойств отображения

Для многострочного текста вы можете обернуть его в элемент span, примените свойства отображения и выполните вертикальное выравнивание.

#abc {
  display: table;
  width: 100%;
}

#abc span {
  display: table-cell;
  vertical-align: middle;
}

Использование свойства преобразования

Другой метод предполагает использование свойства преобразования с функцией переводаY(). Это особенно полезно для старых браузеров, которые не поддерживают свойства отображения.

#abc {
  position: relative;
}

#abc p {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}