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

Для центрирования текста по вертикали существует несколько способов.

Способ 1:

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

В этом примере контейнеру присваивается свойство «display: flex», которое позволяет создать гибкий контейнер, в котором элементы могут быть выровнены как по вертикали, так и по горизонтали. Затем свойства «align-items» и «justify-content» устанавливают элементы в центре контейнера и по вертикали, и по горизонтали соответственно.

Способ 2:

.container {
  position: relative;
}

.container p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

В этом примере, элемент позиционируется абсолютно внутри блочного контейнера. Затем с помощью свойств «top» и «left» устанавливается точка центра элемента. Инструкция «transform: translate(-50%, -50%)» используется для того, чтобы центр элемента совпадал с центром контейнера.

Способ 3:

.container {
  display: table-cell;
  vertical-align: middle;
}

В этом примере контейнеру присваивается свойство «display:table-cell», которое является типом элемента, содержащегося внутри таблицы. Затем свойство «vertical-align» устанавливает выравнивание элементов по вертикальной линии.

Выбор конкретного метода зависит от контекста и особенностей верстки.