Bootstrap 4 центрирование по вертикали и горизонтали
у меня есть страница, где существует только форма, и я хочу, чтобы форма была размещена в центре экрана.
<div class="container">
<div class="row justify-content-center align-items-center">
<form>
<div class="form-group">
<label for="formGroupExampleInput">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
</div>
</form>
</div>
</div>
на justify-content-center
выравнивает форму по горизонтали, но я не могу понять, как выровнять ее по вертикали. Я попытался использовать align-items-center
и align-self-center
, но это не работает.
что я упустил?
демо
5 ответов
обновить 2018 - Bootstrap 4.0.0
здесь не нужно на дополнительный CSS. То, что уже включено в Bootstrap будет работать. Убедитесь, что контейнер(ы) формы полная высота. Bootstrap 4 теперь имеет h-100
класс для высоты 100%...
вертикальная центр:
<div class="container h-100">
<div class="row h-100 justify-content-center align-items-center">
<form class="col-12">
<div class="form-group">
<label for="formGroupExampleInput">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
</div>
</form>
</div>
</div>
https://www.codeply.com/go/raCutAGHre
высота контейнера с элементом (- АМИ) к центру должна быть 100%
(или независимо от желаемой высоты относительно центрированного элемента)
Примечание: при использовании height:100%
(процент высоты) на любой элемент, элемент принимает в высоту его контейнер. В современных браузерах ВХ блоки height:100vh;
может использоваться вместо %
чтобы получить нужную высоту.
горизонтального центра:
-
text-center
в центрdisplay:inline
элементы и содержания -
mx-auto
для центрирования внутри гибкого элемента -
offset-*
илиmx-auto
можно столбцы-центр (.col-
) -
justify-content-center
to столбцы-центр (col-*
) внутриrow
вертикальное выравнивание центра в Bootstrap 4
Bootstrap 4 полноэкранная центрированная форма
Bootstrap 4 центральная входная группа
вам нужно что-то, чтобы центрировать вашу форму. Но поскольку вы не указали высоту для своего html и тела, он просто обернет содержимое, а не окно просмотра. Другими словами, не было места, где можно было бы сосредоточить предмет.
html, body {
height: 100%;
}
.container, .row.justify-content-center.align-items-center {
height: 100%;
min-height: 100%;
}
эта работа для меня:
<section class="h-100">
<header class="container h-100">
<div class="d-flex align-items-center justify-content-center h-100">
<div class="d-flex flex-column">
<h1 class="text align-self-center p-2">item 1</h1>
<h4 class="text align-self-center p-2">item 2</h4>
<button class="btn btn-danger align-self-center p-2" type="button" name="button">item 3</button>
</div>
</div>
</header>
</section>
flexbox может помочь вам. информация здесь
<div class="d-flex flex-row justify-content-center align-items-center" style="height: 100px;">
<div class="p-2">
1
</div>
<div class="p-2">
2
</div>
</div>
в Bootstrap есть текст-центр текст. Например
<div class="container text-center">
вы изменяете следующее
<div class="row justify-content-center align-items-center">
следующее
<div class="row text-center">