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

Вертикальное выравнивание в Bootstrap 4 может быть достигнуто с помощью нескольких методов, каждый из которых имеет свои преимущества и сценарии применения.

Автоматические поля

Автоматические поля можно использовать для центрирования элементов по вертикали внутри их контейнеров. Это достигается путем добавления класса my-auto к элементу, который вы хотите центрировать. Например:

Flexbox
Bootstrap 4 по умолчанию использует Flexbox, предоставляя мощные инструменты для вертикального выравнивания. Чтобы центрировать элемент по вертикали с помощью Flexbox, используйте для элемента класс align-self-center. Альтернативно, использование align-items-center в родительском контейнере центрирует все его гибкие элементы по вертикали.
Display Utilities
Утилиты отображения можно использовать для установки контекста отображения элементов. В сочетании с утилитами вертикального выравнивания вы можете точно настроить вертикальное выравнивание строковых элементов или элементов ячеек таблицы. Например:
Понимая эти методы, вы можете эффективно центрировать элементы по вертикали в Bootstrap 4, улучшая выравнивание и визуальную привлекательность ваших веб-страниц.