从文档(引导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

引导程序具有文本中心来集中文本。例如

<div class="container text-center">

您可以更改以下内容

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

到以下

<div class="row text-center">

从bootstrap v5.0开始:

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

我来到这里是因为我遇到了Bootstrap 4网格系统和Angular *ngFor循环的问题。我通过对实现ngFor的div应用一个col justify-content-center类来修复它:

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

结果是:

你需要一些东西来集中你的身体。但是因为你没有为你的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水平+垂直中心全屏