引导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水平+垂直中心全屏
