Как работает центрирование текста с помощью flexbox?

Flexbox — инструмент CSS для центрирования и упорядочивания элементов веб-страницы как по горизонтали, так и по вертикали. 2

Центрирование текста с помощью Flexbox происходит с помощью нескольких свойств: 1

• Align-items. 1 Позволяет быстро центрировать текст по вертикали внутри flex-контейнера. 1 Для активации выравнивания достаточно задать родительскому элементу свойства: display: flex; align-items: center. 1
• Justify-content. 14 Позволяет точно управлять горизонтальным расположением flex-элементов. 1 Свойство обрабатывает все элементы как группу и управляет распределением пространства между ними. 4
• Align-self. 1 Даёт возможность индивидуально настраивать вертикальное выравнивание отдельных блоков относительно flex-контейнера. 1

Комбинация свойств justify-content: center и align-self: center создаёт двухосевое центрирование. 1

Некоторые особенности использования Flexbox для центрирования текста:

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