Как выровнять элементы по вертикали в Bootstrap: все способы

Вертикальное выравнивание — одна из самых частых задач при вёрстке интерфейсов.
Bootstrap предлагает удобные классы, основанные на flexbox, которые позволяют легко выровнять текст, изображения, блоки и кнопки по вертикали. Ниже — лучшие способы с примерами.

Способ 1. Flex и `align-items-center`

htmlКопироватьРедактировать<div class="d-flex align-items-center" style="height: 200px; background: #eee;">
  <div class="mx-auto">Центр по вертикали</div>
</div>

d-flex — включает flex-контейнер
align-items-center — выравнивает по вертикали
mx-auto — опционально для центрирования по горизонтали

Важно: у контейнера должна быть фиксированная высота.

Способ 2. `row align-items-center` — выравнивание внутри сетки

htmlКопироватьРедактировать<div class="row align-items-center" style="height: 200px;">
  <div class="col text-center bg-light">
    Центр колонки
  </div>
</div>

Flex работает и в row из сетки Bootstrap. Такой подход удобен в карточках и таблицах.

Способ 3. Центр по вертикали и горизонтали одновременно

htmlКопироватьРедактировать<div class="d-flex justify-content-center align-items-center" style="height: 300px;">
  <div class="bg-info p-3 text-white">По центру и вертикально, и горизонтально</div>
</div>

Комбинация justify-content-center (по горизонтали) и align-items-center (по вертикали) — это быстрый способ разместить блок по центру в любом направлении.

Способ 4. Выравнивание текста по вертикали в таблице

htmlКопироватьРедактировать<table class="table table-bordered" style="height: 150px;">
  <tr>
    <td class="align-middle">Текст по центру ячейки</td>
  </tr>
</table>

Класс align-middle работает только внутри таблиц и вертикально центрирует содержимое ячейки.

Способ 5. С помощью классов `vh-100` и `h-100`

htmlКопироватьРедактировать<div class="container vh-100 d-flex align-items-center justify-content-center">
  <div class="text-center">
    <h2>Центр экрана</h2>
  </div>
</div>

vh-100 — высота контейнера на весь экран
align-items-center + justify-content-center — выравнивание блока внутри

Заключение

Bootstrap делает вертикальное выравнивание лёгким и гибким благодаря flexbox. Используй align-items-center для вертикального центрирования, align-self-center — для конкретного элемента, и vh-100 — чтобы центрировать по экрану. Такие приёмы делают вёрстку проще и чище.