Bootstrap 4 Center Вертикальное и горизонтальное выравнивание

У меня есть страница, где существует только форма, и я хочу, чтобы форма была помещена в центр экрана.

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

Что мне не хватает?

DEMO

Ответы

Ответ 1

Обновление 2019 - Bootstrap 4.3.1

Там нет необходимости для дополнительного 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; блока vh height:100vh; можно использовать вместо % чтобы получить желаемую высоту.

Таким образом, вы можете установить html, body {height: 100%} или использовать новый класс min-vh-100 для контейнера вместо h-100.

Горизонтальный центр:

  • display:inline text-center к центру display:inline элементы и содержимое столбца
  • mx-auto для центрирования внутри гибких элементов
  • offset-* или mx-auto можно использовать для .col- столбцов (.col-)
  • столбцы col-* justify-content-center по центру (col-*) внутри row

Вертикальный центр выравнивания в Bootstrap 4
Bootstrap 4 полноэкранная центрированная форма
Bootstrap 4 центральная группа ввода
Bootstrap 4 горизонтальный + вертикальный центр полный экран

Ответ 2

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

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

Ответ 3

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

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

Ответ 4

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>

Ответ 5

Никто не работал для меня. Но его один сделал.

Так как класс Bootstrap 4.row теперь отображается: flex, вы можете просто использовать новую утилиту align-self-centre flexbox в любом столбце для его вертикального центрирования:

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

Я узнал об этом из https://medium.com/wdstack/bootstrap-4-vertical-center-1211448a2eff

Ответ 6

Бутстрап имеет текстовый центр для центровки текста. Например

<div class="container text-center">

Вы меняете следующее

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

к следующему

<div class="row text-center">