Важный! Вертикальный центр относительно высоты родителя
Если родительский элемент элемента, который вы пытаетесь центрировать, не имеет определенной
высоты , ни одно из решений для вертикального центрирования не будет работать!
Теперь на вертикальное центрирование в 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 Центральное вертикальное и горизонтальное выравнивание
Вы можете вертикально выровнять контейнер, сделав родительский контейнер прогибается и добавив
align-items:center
:Обновленная ручка
источник
html, body {height:100%}
... добавив, что сделал это работает! Спасибо!Следующие 4 начальной загрузки помогли мне решить эту проблему
источник
Поскольку ничего из вышеперечисленного не помогло мне, я добавляю другой ответ.
Цель: вертикальное и горизонтальное выравнивание элемента div на странице с помощью загрузочных классов 4 flexbox.
Шаг 1: Установите ваш внешний div на высоту
100vh
. Это устанавливает высоту в 100% от высоты Veiwport. Если вы этого не сделаете, больше ничего не будет работать. Установка его в высоту100%
только относительно родителя, поэтому, если родитель не является полной высотой области просмотра, ничего не будет работать. В приведенном ниже примере я установил Body на 100vh.Шаг 2: Установите контейнер div в качестве контейнера flexbox с
d-flex
классом.Шаг 3: Центрируйте div горизонтально по отношению к
justify-content-center
классу.Шаг 4: Центрируйте div вертикально
align-items-center
Шаг 5: Запустите страницу, просмотрите ваш вертикально и горизонтально центрированный div.
Обратите внимание, что не существует специального класса, который нужно устанавливать в самом центрированном div (дочернем div)
источник
100vh
трюк мне очень помог. Bootstrap также предоставляетvh-100
класс для этого.источник
Я попробовал все ответы здесь, но обнаружил здесь разницу между h-100 и vh-100. Вот мое решение:
источник
В Bootstrap 4 (бета) используйте
align-middle
. Обратитесь к документации Bootstrap 4 по вертикальному выравниванию :источник
источник
Эта строка, где происходит волшебство
<div class="col-md-6 my-auto">
,my-auto
будет центрировать содержимое столбца. Это прекрасно работает в таких ситуациях, как пример кода выше, где у вас может быть изображение переменного размера, и вам нужно, чтобы текст в столбце находился справа от него.источник
Я сделал это с помощью Bootstrap
4.3.1
:источник
источник
flex-grow-1
класса на карту предотвращает его сжатие.Выравнивание по вертикали Используя этот класс начальной загрузки 4:
например:
и если вы хотите, чтобы родитель был кругом:
Какие два пользовательских класса CSS следующие:
Окончательное использование может быть, например, таким:
источник
Поместите ваш контент в контейнер flexbox, который имеет высоту 100%, т.е. h-100. Затем централизовать выравнивание контента с помощью класса justify-content-center .
источник
использовать
.my-auto
(bootsrap4) класс CSS на ваш Divисточник
В Bootstrap 4.1.3:
Это сработало для меня, когда я пытался расположить значок начальной загрузки
container > row > column
рядом сh1
названием.То, что сработало, было несколько простых CSS:
или
источник