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

Ситуация, когда требуется вертикально выровнять текст внутри flexbox, является довольно обычной. Рассмотрим пример, в котором есть необработанный список (<ul>), содержащий элементы списка (<li>), в которых есть текст. Стандартное поведение HTML приводит к тому, что текст внутри <li> будет выравниваться по верхнему краю.

<ul>
  <li>Это текст</li>
</ul>

ul {
  height: 100%;
}

li {
  background: silver;
  width: 100%;
  height: 20%;
}

Для достижения цели вертикального выравнивания текста внутри flexbox, можно использовать свойство CSS display: flex;. Это свойство делает элемент контейнером flexbox и позволяет использовать свойства flexbox для выравнивания содержимого.

li {
  display: flex;
  align-items: center;
  justify-content: center;
  background: silver;
  width: 100%;
  height: 20%;
}

В данном примере используются два свойства flexbox: align-items и justify-content. Align-items контролирует выравнивание элементов flexbox по вертикали (если основная ось горизонтальна), а justify-content — по горизонтали. Значение center для обоих свойств обеспечивает центрирование содержимого элемента списка по обоим направлениям.

Таким образом, использование flexbox позволяет легко и просто вертикально выравнивать текст внутри контейнера.