Как с помощью CSS отцентрировать блок по вертикали и горизонтали внутри родительского элемента (метод Flexbox)?
Flexbox — один из самых удобных и современных способов центрирования элементов в CSS. Чтобы отцентрировать дочерний блок по вертикали и горизонтали одновременно, достаточно применить три CSS-свойства к **родительскому** элементу.
## Базовый пример
css
.parent {
display: flex;
justify-content: center; /* горизонтальное центрирование */
align-items: center; /* вертикальное центрирование */
}
html
Родительскому элементу обязательно нужно задать **высоту** (height), иначе вертикальное центрирование не будет заметно, так как блок по умолчанию растягивается только под содержимое.
css
.parent {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* или любое фиксированное значение, например 400px */
}
## Что делает каждое свойство
— **display: flex** — включает режим Flexbox для контейнера. Все прямые дочерние элементы становятся flex-элементами.
— **justify-content: center** — выравнивает элементы вдоль **главной оси** (по умолчанию — горизонтальной).
— **align-items: center** — выравнивает элементы вдоль **поперечной оси** (по умолчанию — вертикальной).
## Альтернативный способ через margin: auto
Если у вас один дочерний элемент, можно задать ему `margin: auto` — Flexbox автоматически распределит свободное пространство равномерно со всех сторон:
css
.parent {
display: flex;
height: 100vh;
}
.child {
margin: auto;
}
## Центрирование при вертикальном направлении
Если вы используете `flex-direction: column`, оси меняются местами:
css
.parent {
display: flex;
flex-direction: column;
justify-content: center; /* теперь вертикаль */
align-items: center; /* теперь горизонталь */
height: 100vh;
}
## Частые ошибки
1. **Забыть задать высоту родителю** — без явной высоты вертикальное центрирование не работает.
2. **Применять свойства к дочернему элементу вместо родителя** — `display: flex`, `justify-content` и `align-items` задаются именно контейнеру.
3. **Путать оси при `flex-direction: column`** — направление главной и поперечной оси меняется.
## Поддержка браузерами
Flexbox поддерживается всеми современными браузерами (Chrome, Firefox, Safari, Edge) без префиксов. Для поддержки очень старых браузеров (IE 10) может потребоваться префикс `-ms-flexbox`.
Метод Flexbox считается стандартом де-факто для центрирования и компоновки элементов в современной вёрстке.