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

在使用v4或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>

这样做，就是这样。

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

引导5

body {
  display: flex;
  align-items: center;
}

https://getbootstrap.com/docs/5.1/examples/sign-in/

我来到这里是因为我遇到了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>

结果是: