Bootstrap 4中心垂直和水平对齐

Question

我有一个只存在表单的页面,我希望将表单放在屏幕的中心.

<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

Answer 1

更新2018 - Bootstrap 4.0.0

有没有必要进行额外的CSS.Bootstrap中已包含的内容将起作用.确保表格的容器是全高的.Bootstrap 4现在有一个h-100100%高度的班级......

垂直中心:

<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;中,可以使用单位来代替%获得所需的高度.

水平中心:

• min-vh-100中心h-100元素和列内容
• text-center 用于居中的柔性元件
• display:inline或者mx-auto可以用于中心列(offset-*)
• mx-auto将列(.col-)放在里面justify-content-center

Bootstrap中的垂直对齐中心4
Bootstrap 4全屏中心形式
Bootstrap 4中心输入组
Bootstrap 4水平+垂直中心全屏

Answer 2

Bootstrap 有 text-center 来居中文本。例如

<div class="container text-center">

您更改以下内容

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

到以下

<div class="row text-center">

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

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

Answer 5

你需要一些东西来把你的形式集中到.但是因为你没有为你的html和body指定高度,它只会包装内容 - 而不是视口.换句话说,没有空间将物品放在中心位置.

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

Answer 6

没有一个对我有用。但他的一个。

由于 Bootstrap 4 .row 类现在是 display:flex 你可以简单地在任何列上使用新的 align-self-center 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了解到的

Answer 7

v4使用or时尝试下面给出的代码v5。

<div class="d-flex align-items-center justify-content-center" style="height:100vh;">
  Vertically and Horizontally Aligned :)
</div>

...或者...如果使用v5.

<div class="position-absolute top-50 start-50 translate-middle">
  Vertically and Horizontally Aligned :)
</div>

这样做，就是这样:)