Как центрировать текст по вертикали с помощью CSS?

Распространенная задача CSS - центрировать текст или изображения по вертикали.

Хотя CSS2 не поддерживает вертикальное выравнивание. Но мы можем центрировать блоки по вертикали, объединив несколько свойств. Хитрость заключается в том, чтобы указать, что внешний блок должен быть отформатирован как ячейка таблицы, потому что содержимое ячейки таблицы может быть центрировано по вертикали.

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

DIV.container {
    мин-высота: 10em;
    дисплей: таблица-ячейка;
    вертикальное выравнивание: средний}
...
DIV {
  GeeksforGeeks
}

Более универсальный подход

Это еще один способ выровнять текст по вертикали. Это решение будет работать для одной строки и нескольких строк текста, но по-прежнему требует контейнера фиксированной высоты:

div {
  высота: 200 пикселей;
  высота строки: 200 пикселей;
  выравнивание текста: центр;
  граница: 2px пунктирная # f69c55;
}
охватывать {
  дисплей: встроенный блок;
  вертикальное выравнивание: по центру;
  высота строки: нормальный;
}
div {
  GeeksforGeeks
}

CSS просто изменяет размер div, выравнивает по вертикали по центру диапазон, устанавливая высоту строки div, равную его высоте, и делает диапазон встроенным блоком с vertical-align: middle. Затем он устанавливает нормальную высоту строки для диапазона, поэтому его содержимое естественным образом перетекает внутрь блока.