Важный! Вертикальный центр относительно высоты родителя
Если родительский элемент элемента, который вы пытаетесь центрировать, не имеет определенной
высоты , ни одно из решений для вертикального центрирования не будет работать!
Теперь на вертикальное центрирование в Bootstrap 4 ...
Вы можете использовать новые утилиты flexbox & size, чтобы сделать container
полноразмерным и display: flex
. Эти параметры не требуют дополнительного CSS (за исключением того, что высота контейнера (т. Е. Html, body) должна составлять 100% ).
Вариант 1 align-self-center
на flexbox child
<div class="container d-flex h-100">
<div class="row justify-content-center align-self-center">
I'm vertically centered
</div>
</div>
https://www.codeply.com/go/fFqaDe5Oey
Вариант 2 align-items-center
на flexbox родительский ( .row
есть display:flex; flex-direction:row
)
<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-6 mx-auto">
<div class="jumbotron">
I'm vertically centered
</div>
</div>
</div>
</div>
https://www.codeply.com/go/BumdFnmLuk
Вариант 3 justify-content-center
на flexbox родительский ( .card
есть display:flex;flex-direction:column
)
<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-6 mx-auto">
<div class="card h-100 border-primary justify-content-center">
<div>
...card content...
</div>
</div>
</div>
</div>
</div>
https://www.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
столбец.
<div class="row h-100">
<div class="col-sm-12 my-auto">
<div class="card card-block w-25">Card</div>
</div>
</div>
Вертикальный центр с использованием Auto Margins Demo
my-auto
представляет поля на вертикальной оси Y и эквивалентно:
margin-top: auto;
margin-bottom: auto;
2 - Вертикальный центр с Flexbox:
Поскольку Bootstrap 4 .row
теперь display:flex
доступен, вы можете просто использовать align-self-center
любой столбец для его вертикального центрирования ...
<div class="row">
<div class="col-6 align-self-center">
<div class="card card-block">
Center
</div>
</div>
<div class="col-6">
<div class="card card-inverse card-danger">
Taller
</div>
</div>
</div>
или используйте align-items-center
все, .row
чтобы выровнять по центру все col-*
строки подряд ...
<div class="row align-items-center">
<div class="col-6">
<div class="card card-block">
Center
</div>
</div>
<div class="col-6">
<div class="card card-inverse card-danger">
Taller
</div>
</div>
</div>
Вертикальный центр Разная высота колонны Демонстрация
Посмотрите это Q / A по центру, но сохраняйте равную высоту
3 - Вертикальный центр с использованием утилит дисплея:
Бутстрап 4 имеет дисплей утилиты , которые могут быть использованы для display:table
, display:table-cell
, display:inline
и т.д .. Они могут быть использованы с вертикальными утилитами выравнивания для выравнивания инлайн, встроенный блок или элементы ячеек таблицы.
<div class="row h-50">
<div class="col-sm-12 h-100 d-table">
<div class="card card-block d-table-cell align-middle">
I am centered vertically
</div>
</div>
</div>
Вертикальный центр Использование дисплея Utils Demo
Больше примеров
Вертикальное центральное изображение в <div>
вертикальном центре .row in .container
Вертикальный центр и дно в <div>
вертикальном центре дочернего элемента внутри родителя
Вертикальный центр полноэкранного jumbotron
Важный! Я упоминал высоту?
Помните, что вертикальное центрирование относительно высоты родительского элемента. Если вы хотите сосредоточиться на всей странице, в большинстве случаев это должен быть ваш CSS ...
body,html {
height: 100%;
}
Или используйте min-height: 100vh
( min-vh-100
в Bootstrap 4.1+) для родителя / контейнера. Если вы хотите центрировать дочерний элемент внутри родителя. Родитель должен иметь определенную высоту .
Также см .:
Вертикальное выравнивание в начальной загрузке 4
Начальная загрузка 4 Центральное вертикальное и горизонтальное выравнивание