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, но это не работает.

что я упустил?

демо

49
bootstrap-4 centering css twitter-bootstrap

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 центральная входная группа

99

вам нужно что-то, чтобы центрировать вашу форму. Но поскольку вы не указали высоту для своего html и тела, он просто обернет содержимое, а не окно просмотра. Другими словами, не было места, где можно было бы сосредоточить предмет.

html, body {
  height: 100%;
}
.container, .row.justify-content-center.align-items-center {
  height: 100%;
  min-height: 100%;
}
8

эта работа для меня:

<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>
5

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>
1

в Bootstrap есть текст-центр текст. Например

<div class="container text-center">

вы изменяете следующее

<div class="row justify-content-center align-items-center">

следующее

<div class="row text-center">
-1