Для достижения вертикальной центрировки в Flexbox-контейнерах можно использовать следующие CSS-правила: 1

1. Свойство display: flex делает контейнер гибким блоком, что позволяет применять к нему свойства Flexbox. 1
2. Свойство flex-direction: column означает, что элементы внутри контейнера будут располагаться вертикально. 1
3. Свойство align-items: center центрирует содержимое по горизонтали. 14
4. Свойство justify-content: center — по вертикали. 1

Также для вертикального центрирования определённых flex-элементов можно установить свойство align-self. 3

Ещё один нюанс: чтобы контейнер был отцентрирован относительно всей страницы, его высота должна быть равна высоте видимой области браузера. 13 Для этого используют свойство height: 100vh. 13