css — Центр вертикального выравнивания в Bootstrap 4
Важно! Вертикальный центр относительно высоты родителя
Если родительский элемент, который вы пытаетесь центрировать, не определен высота , нет решения вертикального центрирования будут работать!
Теперь о вертикальном центрировании…
Bootstrap 5 (Обновлено 2021)
Bootstrap 5 по-прежнему основан на flexbox , поэтому вертикальное центрирование работает так же, как Bootstrap 4. Например, align-items-center , justify-content-center или автоматические поля могут использоваться на родительском элементе flexbox ( row или d- флекс ).
использовать align-items-center в родительской строке flexbox ( row или d-flex )
использовать justify-content-center
в родительском столбце flexbox ( d-flex flex-column )
использовать my-auto на родительском flexbox
Вертикальный центр в Bootstrap 5
Bootstrap 4
Вы можете использовать новые утилиты flexbox & size, чтобы сделать контейнер полной высоты и display: flex . Эти параметры не требуют дополнительного CSS (за исключением того, что высота контейнера (т.е.: html, body) должна быть 100% ).
Вариант 1 align-self-center на дочернем flexbox
<дел>
<дел>
я по центру по вертикали
https://codeply.com/go/fFqaDe5Oey
Вариант 2 align-items-center на родительском элементе flexbox ( .row равно display:flex; flex-direction:row < 1 1 ) раздел> <дел> <дел> <дел> я по центру по вертикали
https://codeply.com/go/BumdFnmLuk
Вариант 3 justify-content-center на родительском элементе flexbox ( .card равно ) display:flex;flex-direction 900column 100029
<дел>
<дел>
<дел>
<дел>
<дел>
.
..содержимое карты...
https://codeply.com/go/3gySSEe7nd
Подробнее о вертикальном центрировании Bootstrap 4
Теперь, когда Bootstrap 4 предлагает flexbox и другие утилиты, существует множество подходов к вертикальному центрированию.
выравнивание. http://www.codeply.com/go/WG15ZWC4lf
1 - Вертикальное центрирование с использованием автоматических полей:
Другой способ вертикального центрирования — использовать my-auto . Это отцентрирует элемент внутри его контейнера. Например,
h-100 делает строку полной высоты, а my-auto будет вертикально центрировать столбец col-sm-12 .
<дел>
<дел>
Карточка
Вертикальный центр с использованием автоматических полей Demo
my-auto представляет поля по вертикальной оси Y и эквивалентен:
margin-top: auto;
нижняя граница: авто;
2 — Вертикальный центр с Flexbox:
Начиная с Bootstrap 4 . row теперь
display:flex вы можете просто использовать align-self-center для любого столбца, чтобы центрировать его по вертикали...
<дел>
<дел>
Центр
<дел>
<дел>
выше
или используйте align-items-center для всех .row для вертикального выравнивания по центру всех col-* в строке...
<дел>
<дел>
Центр
<дел>
<дел>
выше
Вертикальный центр Столбцы разной высоты Демонстрация
См. этот вопрос/ответ по центру, но сохраняйте одинаковую высоту
3 - Вертикальный центр с использованием утилит отображения:
В Bootstrap 4 есть утилиты отображения, которые можно использовать для display:table , display:table-cell , display:inline и т. д. Они могут может использоваться с утилитами вертикального выравнивания для выравнивания встроенных, встроенных блоков или элементов ячеек таблицы.
<дел>
<дел>
<дел>
Я центрирован по вертикали
Центр по вертикали с помощью Display Utils Демонстрация
Другие примеры Изображение по центру по вертикали в
Центр по вертикали .row в .container Центр по вертикали и низ в
по центру дочернего элемента внутри Вертикальный центральный полноэкранный jumbotron
Важно! Я упоминал рост?
Помните, что вертикальное центрирование относительно высота родительского элемента . Если вы хотите центрировать всю страницу, в большинстве случаев это должен быть ваш CSS...
body,html {
высота: 100%;
}
Или используйте min-height: 100vh ( min-vh-100 в Bootstrap 4. 1+) для родителя/контейнера. Если вы хотите центрировать дочерний элемент внутри родительского. Родитель должен иметь определенную высоту .
См. также: Вертикальное выравнивание в bootstrap 4 Bootstrap Center Вертикальное и горизонтальное выравнивание
Вертикальное выравнивание в Bootstrap 4
Вы можете использовать класс flex-xs-middle следующим образом..
Bootstrap 4 Alpha 5
<дел>
<дел>
<дел>
<дел>
Поставщик
<дел>
<дел>
<дел>
<дел>
Поставщик
http://www.codeply.com/go/PNNaNCB4T5 (с использованием CSS Bootstrap 4 flexbox)
Bootstrap 4
ОБНОВЛЕНИЕ для Bootstrap 4.0.0
5
0 по умолчанию существует множество различных подходов к вертикальному выравниванию с использованием: автоматических полей, утилит flexbox или утилит отображения вместе с утилитами вертикального выравнивания.
На первый взгляд «утилиты вертикального выравнивания» кажутся очевидными, но эти только работают со встроенными и табличными элементами отображения. Ниже приведены варианты вертикального центрирования Bootstrap 4. Помните, что вертикальное выравнивание зависит от высоты родителя.
1 - Вертикальное центрирование с использованием автоматических полей:
Другой способ вертикального центрирования - использовать my-auto . Это отцентрирует элемент внутри его контейнера. Например, h-100 задает полную высоту строки, а my-auto вертикально центрирует столбец
col-sm-12 .
<дел>
<дел>
Карточка
Вертикальный центр с использованием автоматических полей Demo
my-auto представляет поля по вертикальной оси Y и эквивалентен:
margin-top: auto;
нижняя граница: авто;
2 — Вертикальный центр с Flexbox:
Поскольку Bootstrap 4 . row теперь display:flex , вы можете просто использовать vertical-self-center для центрирования по любому столбцу.
<дел>
<дел>
<дел>
Центр
<дел>
<дел>
выше
или используйте align-items-center для всего .row для вертикального выравнивания по центру всех col-* в ряду...
<дел>
<дел>
Центр
<дел>
<дел>
выше
Вертикальные центральные колонны разной высоты Demo
Важно : прямой родитель выравниваемого элемента должен иметь определенную высоту !
3 - Вертикальный центр с использованием утилит отображения:
В Bootstrap 4 есть утилиты отображения, которые можно использовать для display:table , display:table-cell , display:inline и т.
Эти параметры не требуют дополнительного CSS (за исключением того, что высота контейнера (т.е.: html, body) должна быть 100% ).
row 
д. Они могут может использоваться с утилитами вертикального выравнивания для выравнивания встроенных, встроенных блоков или элементов ячеек таблицы.
1+) для родителя/контейнера. Если вы хотите центрировать дочерний элемент внутри родительского. Родитель должен иметь определенную высоту .
row 