Метод Flexbox для центрирования элементов на странице работает на основе двух взаимосвязанных осей: 1

1. Главная ось (main axis) определяет основное направление, по которому располагаются flex-элементы. 1 По умолчанию главная ось направлена горизонтально, слева направо. 1 Её ориентация задаётся с помощью свойства flex-direction. 1
2. Поперечная ось (cross axis) перпендикулярна главной оси. 1 Если главная ось горизонтальная, то поперечная будет вертикальной, и наоборот. 1 Элементы можно выравнивать по этой оси с помощью свойств, таких как align-items и align-self. 1

Для центрирования элементов вдоль главной оси используется свойство justify-content. 34 Значением по умолчанию является flex-start, которое выравнивает все элементы внутри контейнера flex по началу главной оси. 3 Если нужно центрировать элементы, следует использовать свойство justify-content со значением center. 3

Для центрирования вдоль поперечной оси используется свойство align-items. 3 Если использовать его вместе со свойством center, оно центрирует элементы по вертикали, когда flex-direction имеет значение row или row-reverse, и по горизонтали, когда flex-direction имеет значение column или column-reverse. 3