Как работает вертикальное центрирование элементов во Flexbox?

Вертикальное центрирование элементов во Flexbox происходит с помощью свойства align-items. 14

Это свойство указывает на вертикальное выравнивание содержимого внутри flex-контейнера. 1 Для центрирования используется значение center. 1

Некоторые другие значения свойства align-items для вертикального позиционирования: 2

• flex-start — прижимает элементы к верху контейнера; 2
• center — размещает по центру; 2
• flex-end — выравнивает по нижнему краю; 2
• stretch — растягивает на всю высоту (значение по умолчанию); 2
• baseline — выравнивает по базовой линии текста. 2

Особенности применения свойства align-items:

• Работает только при заданной высоте контейнера; 2
• Влияет на все дочерние элементы одновременно; 2
• Можно переопределить для отдельного элемента через align-self; 2
• Сочетается с justify-content для горизонтального выравнивания. 2