Я пытаюсь центрировать мой Контейнер в середине страницы, используя Bootstrap 4.
Важный! Вертикальный центр относительно высоты родителя
Если родительский элемент элемента, который вы пытаетесь центрировать, не имеет определенной высоты, ни одно из решений для вертикального центрирования не будет работать!
Теперь вернемся к центру в Bootstrap 4...
Вы можете использовать новые утилиты flexbox & size, чтобы сделать container
полный рост и display: flex
. Эти параметры не требуют дополнительного CSS (за исключением того, что высота контейнера (т.е. html, body) должна быть 100%).
Вариант 1 align-self-center
на дочернем элементе flexbox
<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
на родительском .row
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
для родительского .card
flexbox (.card
is 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
col-sm-12
высоту строки, а 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
в любом столбце, чтобы вертикально 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 - Вертикальный центр с использованием утилиты дисплея:
Bootstrap 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 в .container
Вертикальный центр и дно в <div>
Вертикальный центр ребенка внутри родителя
Вертикальный центр полноэкранного jumbotron
Важный! Я упоминал высоту?
Помните, что вертикальное центрирование относительно высоты родительского элемента. Если вы хотите сосредоточиться на всей странице, в большинстве случаев это должен быть ваш CSS...
body,html {
height: 100%;
}
Или используйте min-height: 100vh
для родителя/контейнера. Если вы хотите центрировать дочерний элемент внутри родителя. Родитель должен иметь определенную высоту.
Также см:
Вертикальное выравнивание в начальной загрузке 4
Bootstrap 4 по центру вертикального и горизонтального выравнивания
вы можете вертикально выровнять свой контейнер, создав контейнер родительского контейнера и добавив align-items:center
:
body {
display:flex;
align-items:center;
}
html, body {height:100%}
... добавив, что заставило его работать! Спасибо!
После начальной загрузки 4 класса помогли мне решить эту проблему
<div class="col text-center justify-content-center align-self-center">
<img width=3rem src=".." alt="...">
</div>
.jumbotron {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Поскольку ни один из вышеперечисленных не работал для меня, я добавляю еще один ответ.
Цель: вертикально и горизонтально выровнять div на странице, используя классы bootbox 4-го класса.
Шаг 1: Установите свой внешний div на высоту 100vh
. Это устанавливает высоту до 100% высоты Veiwport. Если вы этого не сделаете, больше ничего не получится. Установка его на высоту 100%
относится только к родительскому, поэтому, если родительский элемент не является полной высотой окна просмотра, ничего не будет работать. В приведенном ниже примере я установил Body на 100vh.
Шаг 2. Установите контейнер контейнера в контейнер flexbox с классом d-flex
.
Шаг 3: Центр div горизонтально с классом justify-content-center
.
Шаг 4: Центрируйте div по вертикали с align-items-center
Шаг 5: Запустите страницу, просмотрите свой вертикальный и горизонтально-центрированный div.
Обратите внимание, что нет специального класса, который должен быть установлен на самом центре с центром (дочерний div)
<body style="background-color:#f2f2f2; height:100vh;">
<div class="h-100 d-flex justify-content-center align-items-center">
<div style="height:600px; background-color:white; width:600px;">
</div>
</div>
</body>
В Bootstrap 4 (бета) используйте align-middle
. См. Бутстрап 4 Документация по вертикальному выравниванию:
Измените выравнивание элементов с помощью вертикального выравниваниякоммунальные услуги. Обратите внимание, что вертикальное выравнивание влияет только на встроенный, встроенный блок, встроенный и элементы таблицы.
Выберите
.align-baseline
,.align-top
,.align-middle
,.align-bottom
,.align-text-bottom
и.align-text-top
по мере необходимости.
<div class="col-lg-5 col-sm-5 offset-1 d-flex">
<div class="offer-txt justify-content-center align-self-center">
<span class="inner-title">Our Offer</span>
<h2 class="section-title">Todays Special </h2>
<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly.</p>
</div>
</div>
/* Вы должны добавить высоту 100vh */
Центр<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row align-items-center justify-content-center" style="height:100vh;">
<div>Center Div Here</div>
</div>
</div>
</body>
</html>
flex-grow-1
на карту предотвращает ее сжатие.
В Bootstrap 4.1.3:
Это работало для меня, когда я пытался центрировать значок начальной загрузки внутри container > row > column
рядом с заголовком h1
.
Что делало простую css:
.my-valign-center {
vertical-align: 50%;
}
или же
<span class="badge badge-pill" style="vertical-align: 50%;">My Badge</span>