Вы здесь

CSS свойство align-items

Свойство align-items выравнивает флекс-элементы внутри контейнера по высоте (по перпендикулярной оси).

CSS синтаксис

align-items: stretch | center | flex-start | flex-end | baseline;

Возможные значения

Значение Описание
stretch Значение по умолчанию. Флекс-элементы растягиваются, занимая все пространство контейнера по высоте.
center Флекс-элементы выравниваются по центру контейнера.
flex-start Флекс-элементы выравниваются относительно верхнего края (начала) контейнера.
flex-end Флекс-элементы выравниваются относительно нижнего края (конца) контейнера.
baseline Флекс-элементы выравниваются по базовой линии.

Пример

Устанавливаем выравнивание флекс-элементов по центру флекс-контейнера <div>


div {
    display: -webkit-flex; /* Safari */
    -webkit-align-items: center; /* Safari 7.0+ */
     display: flex;
    align-items: center;
}