Значение center позволяет выровнять
элементы по центру по поперечной оси:
.parent {
display: flex;
flex-direction: row;
align-items: center; /* центрируем по побочной оси */
}
Результат выполнения кода:
Без высоты
Давайте попробуем убрать высоту нашим блокам. В этом случае их высота будет формироваться их содержимым, но центрирование все равно будет:
Разная высота
Если содержимое какого-либо элемента делает его высоту больше остальных, центрирование все равно будет работать: