Вертикальное выравнивание текста CSS: простые способы и лучшие практики

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

1. Используйте свойство line-height для выравнивания однострочного текста:

css
.element {
  height: 200px;
  line-height: 200px;
}

2. Для многострочного текста можно использовать flexbox. Установите родительскому элементу свойства display: flex и align-items: center, чтобы дочерние элементы были выровнены по вертикали:

css
.parent {
  display: flex;
  align-items: center;
  height: 200px;
}
.child {
  /* styles for child elements */
}

3. В некоторых случаях может быть полезным использовать свойство position. Установите position: absolute и top: 50% для элемента, который нужно выровнять, а затем сместите его на половину его высоты с помощью transform: translateY(-50%):

css
.element {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

4. Для выравнивания текста по центру по вертикали можно использовать свойство display: table-cell и vertical-align: middle. Установите родительскому элементу display: table, а дочернему - display: table-cell:

css
.parent {
  display: table;
  height: 200px;
}
.child {
  display: table-cell;
  vertical-align: middle;
}

В зависимости от конкретной задачи выбирайте наиболее подходящий способ выравнивания текста по вертикали в CSS.