Выравнивание элементов по центру с помощью Flexbox

Один из самых удобных способов выровнять элемент по центру — использовать Flexbox. Этот метод отлично подходит для верстки блоков, кнопок, модальных окон, карточек и других элементов интерфейса.

Все свойства выравнивания задаются родительскому элементу.

Включаем Flexbox

Для начала назначаем родительскому элементу свойство:

display: flex;

После этого все дочерние элементы начинают работать внутри flex-контейнера.

Вертикальное выравнивание

Чтобы выровнять дочерний элемент по вертикали, используем:

align-items: center;

Свойство align-items отвечает за выравнивание элементов по поперечной оси.

Горизонтальное выравнивание

Для горизонтального выравнивания используем:

justify-content: center;

Свойство justify-content выравнивает элементы по основной оси flex-контейнера.

Полный пример

В итоге получаем универсальный способ центрирования элемента:

.parent {
    display: flex;
    align-items: center;
    justify-content: center;
}

Что в итоге

После применения этих свойств дочерний элемент будет расположен ровно по центру родительского блока — как по горизонтали, так и по вертикали.

Flexbox отлично подходит для:

• центрирования текста и кнопок;
• выравнивания элементов в карточках;
• создания адаптивных интерфейсов;
• верстки модальных окон;
• создания гибких сеток.