Как идеально отцентрировать один элемент в середине блока через flexbox?

Задан 3 месяца назад1.3к просмотров2 ответа

Хочу, чтобы кнопка стояла ровно по центру блока — и по горизонтали, и по вертикали. Слышал, что flexbox это делает в три строчки, но не понимаю, какие именно свойства.

Снежана Пономарёва 🐣 Птенец

спросил 3 месяца назад

2 ответа

✓ Принятый ответ — помог автору

Да, через flexbox это классика. Свойства вешаются на родителя (контейнер), а не на саму кнопку:

.parent {
  display: flex;
  justify-content: center;  /* по горизонтали */
  align-items: center;      /* по вертикали */
  height: 300px;            /* нужна высота, чтобы было где центрировать */
}

Как запомнить оси:

justify-content — раскладывает по главной оси (по умолчанию горизонтально, слева-направо).
align-items — по поперечной оси (по умолчанию вертикально).

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

Вера Романова 🐣 Птенец

1 месяц назад

Маленькое уточнение про оси: они меняются местами, если добавить flex-direction: column. Тогда justify-content станет вертикальным, а align-items горизонтальным. Но для центрирования это не важно — center + center центрирует в любом случае.

Елена Соколова 🐣 Птенец

2 месяца назад

Ваш ответ

Войдите, чтобы ответить на вопрос.