How to use Bootstrap 5 для выравнивания элементов на странице?

Для выравнивания элементов на странице с помощью Bootstrap 5 можно использовать следующие инструменты: bootstrapdocs.ru

1. Вертикальное выравнивание (vertical-align). bootstrapdocs.ru Это свойство влияет только на элементы с типами inline, inline-block, inline-table и ячейки таблицы. bootstrapdocs.ru Можно выбрать одно из следующих значений: bootstrapdocs.ru

• .align-baseline — выравнивание по базовой линии; bootstrapdocs.ru
• .align-top — выравнивание по верхней границе; bootstrapdocs.ru
• .align-middle — выравнивание по середине; bootstrapdocs.ru
• .align-bottom — выравнивание по нижней границе; bootstrapdocs.ru
• .align-text-top — выравнивание текста по верхней границе; bootstrapdocs.ru
• .align-text-bottom — выравнивание текста по нижней границе. bootstrapdocs.ru

1. Вертикальное центрирование блочных элементов (например, <div>). bootstrapdocs.ru Для этого нужно добавить класс .d-flex к родительскому элементу, чтобы включить режим flex. bootstrapdocs.ru Затем применить .align-items-center для вертикального выравнивания контента и .justify-content-center для горизонтального выравнивания. bootstrapdocs.ru

Также для центрирования элементов можно использовать класс .translate-middle, который в комбинации с утилитами позиционирования позволяет абсолютно центрировать элемент. getbootstrap.com