Bootstrap 4 по центру вертикального и горизонтального выравнивания

163

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

<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

user348173
источник

Ответы:

323

Обновление 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 .

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


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

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

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

Zim
источник
Можно ли использовать <section>тег или нужно придерживаться <div>s для центрирования контента по горизонтали и вертикали в окне просмотра? У меня есть существующий сайт, на котором есть страницы с разделами, которые меняют цвет и / или фоновые изображения.
Адриан
Разве любой прямой ребенок в ряду не должен быть .col?
Мигель Стивенс
7
Этот ответ слегка нарушен. Вы явно заявляете, что «нет необходимости в дополнительном CSS», но это неправильно. В вашем примере кода показано, что вы должны установить body и html на 100% в CSS вне Bootstrap 4. Без этого дополнительного CSS ваше решение не будет работать.
майор
1
Нет, body и html не являются "внешними". К ним также можно добавить классы начальной загрузки CSS! codeply.com/go/5ifNMHKUEy @dawn .. что конкретно не сработало? Ваш комментарий не полезен.
Зим
Контейнер не нуждался в 100%, но h-100 justify-content-center align-items-centerработал
JMP
19

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

<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>
karembadawy
источник
1
Не забудьте добавить стили CSS:<style type="text/css"> html, body{ height: 100%; } .full-page{ height: 100vh; width: 100vw; } </style>
pyOwner
15

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>
shades3002
источник
10

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

html, body {
  height: 100%;
}
.container, .row.justify-content-center.align-items-center {
  height: 100%;
  min-height: 100%;
}
Брэм Ванрой
источник
1
Кроме того, h-100класс утилит может быть использован height:100%в Bootstrap 4.
Zim
1
Теперь я советую использовать решение @ZimSystem, потому что оно не требует специального CSS и использует только классы, предоставляемые Bootstrap.
Брэм Ванрой
1
@BramVanroy, как вы сказали, я использовал решение ZimSystem, но оно не сработало для меня. ваше решение работает как с версией 4.0.0, так и с обновлением 4.1.0
Sahan Pasindu Nirmal
9

Bootstrap имеет текст-центр для центрирования текста. Например

<div class="container text-center">

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

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

к следующему

<div class="row text-center">
Ciaran Kehoe
источник
7

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

Так как класс 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

Пауло Педросо
источник
2

Это работает в IE 11 с Bootstrap 4.3 . Пока другие ответы не работали в IE11 в моем случае.

 <div class="row mx-auto justify-content-center align-items-center flex-column ">
    <div class="col-6">Something </div>
</div>
Вакас Бухары
источник
0

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <div class="col-12 border border-info">
          <div class="d-flex justify-content-center align-items-center" style="height: 100px">
              <a href="#" class="btn btn-dark">Transfer</a>
              <a href="#" class="btn btn-dark mr-2 ml-2">Replenish</a>
              <a href="#" class="btn btn-dark mr-3">Account Details</a>
          </div>
    </div>

Леван Джинчарадзе
источник
0

Используйте этот код в CSS:

.container {
    width: 600px;
    height: 350px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
}
Болвиндер Сингх Сохи
источник
0

Я оказался здесь, потому что у меня была проблема с сеткой Bootstrap 4 и циклом Angular * ngFor. Я исправил это, применяя класс col justify-content-center к div, реализующему ngFor:

<div class="row" style="border:1px solid red;">
  <div class="col d-flex justify-content-center">
    <button mat-raised-button>text</button>
  </div>
  <div *ngFor="let text of buttonText" class="col d-flex justify-content-center">
    <button mat-raised-button>text</button>
  </div>
</div>

который дает результат: введите описание изображения здесь

Флетч
источник
0

Из документа (bootsrap 4):

https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content

.justify-content-start
.justify-content-end
.justify-content-center
.justify-content-between
.justify-content-around
.justify-content-sm-start
.justify-content-sm-end
.justify-content-sm-center
.justify-content-sm-between
.justify-content-sm-around
.justify-content-md-start
.justify-content-md-end
.justify-content-md-center
.justify-content-md-between
.justify-content-md-around
.justify-content-lg-start
.justify-content-lg-end
.justify-content-lg-center
.justify-content-lg-between
.justify-content-lg-around
.justify-content-xl-start
.justify-content-xl-end
.justify-content-xl-center
.justify-content-xl-between
.justify-content-xl-around
Мохаммед Аллал
источник