Центрирование — одна из самых частых задач в вёрстке.
Будь то кнопка, карточка, форма или текст — разместить элемент по центру по горизонтали или вертикали в Bootstrap очень просто. Ниже — самые удобные и современные способы.
Горизонтальное центрирование блока
Способ 1. mx-auto — отступы по краям автоматически
htmlКопироватьРедактировать<div class="container">
<div class="mx-auto" style="width: 200px; background: #eee;">Центр</div>
</div>
Класс mx-auto добавляет автоматические внешние отступы по краям (margin-left и margin-right), центрируя блок внутри родителя с фиксированной шириной.
Обязательное условие: у блока должна быть задана ширина.
Способ 2. Использовать сетку Bootstrap
htmlКопироватьРедактировать<div class="container">
<div class="row">
<div class="col-6 mx-auto" style="background: #eee;">Центр</div>
</div>
</div>
Можно задать колонку с классом mx-auto, чтобы разместить её по центру внутри ряда.
Центрирование по вертикали и горизонтали
Способ 3. Flex-классы Bootstrap
htmlКопироватьРедактировать<div class="d-flex justify-content-center align-items-center" style="height: 300px;">
<div style="width: 200px; background: #eee;">Центр</div>
</div>
Класс d-flex включает flexbox, justify-content-center выравнивает по горизонтали, align-items-center — по вертикали. Работает, если у родителя задана высота.
Центрирование текста или inline-элементов
Способ 4. Класс text-center
htmlКопироватьРедактировать<div class="text-center">
<p>Этот текст по центру</p>
<button class="btn btn-primary">Кнопка</button>
</div>
text-center выравнивает по центру всё содержимое, включая кнопки, ссылки и текст.
Заключение
В Bootstrap есть готовые классы для центрирования: mx-auto — для горизонтали, d-flex justify-content-center — для flex-элементов, text-center — для текста. Их можно комбинировать и адаптировать под любые макеты. Быстро, удобно и без дополнительного CSS.