引导5(更新2021年)

Bootstrap 5仍然是基于flexbox的，因此垂直定心的工作方式与Bootstrap 4相同。例如，align-items-center (flex-direction: row)和justify-content-center (flex-direction: column)可以在flexbox父元素(row或d-flex)上使用。

Bootstrap 5中的居中示例

垂直中心(别忘了父节点必须有一个定义好的高度!):

My-auto用于在flex (.d-flex)元素内定心 My-auto可以用来居中列(.col-)在行 将-items-center对齐到行内的中心列(col-*)

水平中心:

从文本中心到中心显示:行内元素和列内容 Mx-auto用于在flex元素内定心 Mx-auto可用于将列(.col-)居中 Justify-content-center到行内的居中列(col-*)

Bootstrap 4.3+(2019年更新)

不需要额外的CSS。什么已经包括在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://codeply.com/go/raCutAGHre

以物品为中心的容器高度应为100% (或任何与居中物体相关的期望高度)

注意:当在任何元素上使用height:100%(百分比高度)时，该元素接受其容器的高度。在现代浏览器vh单位高度:100vh;可以用来代替%，以获得所需的高度。

因此，你可以设置html, body {height: 100%}，或者在容器上使用新的min-vh-100类而不是h-100。

水平中心:

从文本中心到中心显示:行内元素和列内容 Mx-auto用于在flex元素内定心 Offset -*或mx-auto可用于列居中(.col-) Justify-content-center到行内的居中列(col-*)

垂直对齐引导中心 引导4全屏居中形式 引导4中心输入组 引导4水平+垂直中心全屏

你需要一些东西来集中你的身体。但是因为你没有为你的html和body指定高度，它只会包装内容——而不是视口。换句话说，没有空间把物品放在中间。

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

引导5(更新2021年)

Bootstrap 5仍然是基于flexbox的，因此垂直定心的工作方式与Bootstrap 4相同。例如，align-items-center (flex-direction: row)和justify-content-center (flex-direction: column)可以在flexbox父元素(row或d-flex)上使用。

Bootstrap 5中的居中示例

垂直中心(别忘了父节点必须有一个定义好的高度!):

My-auto用于在flex (.d-flex)元素内定心 My-auto可以用来居中列(.col-)在行 将-items-center对齐到行内的中心列(col-*)

水平中心:

从文本中心到中心显示:行内元素和列内容 Mx-auto用于在flex元素内定心 Mx-auto可用于将列(.col-)居中 Justify-content-center到行内的居中列(col-*)

Bootstrap 4.3+(2019年更新)

不需要额外的CSS。什么已经包括在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://codeply.com/go/raCutAGHre

以物品为中心的容器高度应为100% (或任何与居中物体相关的期望高度)

注意:当在任何元素上使用height:100%(百分比高度)时，该元素接受其容器的高度。在现代浏览器vh单位高度:100vh;可以用来代替%，以获得所需的高度。

因此，你可以设置html, body {height: 100%}，或者在容器上使用新的min-vh-100类而不是h-100。

水平中心:

从文本中心到中心显示:行内元素和列内容 Mx-auto用于在flex元素内定心 Offset -*或mx-auto可用于列居中(.col-) Justify-content-center到行内的居中列(col-*)

垂直对齐引导中心 引导4全屏居中形式 引导4中心输入组 引导4水平+垂直中心全屏

从bootstrap v5.0开始:

<div class="position-absolute top-50 start-50 translate-middle">
   centred
</div>

我看了很多关于在页面中心放置表单的帖子，但没有一个是有效的。下面的代码来自一个使用bootstrap 4.1的react组件。高度应该是100vh，而不是100%

<div className="container">
      <div className="d-flex justify-content-center align-items-center" style={height}>
        <form>
          <div className="form-group">
            <input className="form-control form-control-lg" placeholder="Email" type="email"/>
          </div>
          <div className="form-group">
            <input className="form-control form-control-lg" placeholder="Password" type="password"/>
          </div>
          <div className="form-group">
            <button className="btn btn-info btn-lg btn-block">Sign In</button>
          </div>
        </form>
      </div>
    </div>

其中身高在风格上为:

Const height = { 身高:100 vh ｝

这是在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>