如何使用引导程序将<h1>垂直和水平居中

Question

我想使用Bootstrap将h1垂直和水平居中。实际上，我尝试使用Bootstrap flexbox将其与align-items-center属性垂直对齐，因此为了工作它需要height，所以我给了它一定的高度，但是没有用：

应该用h1代替黄色的高光，但这是行不通的。

我不想使用任何jquery或javascript，因为我想练习引导程序。

我不知道为什么，但是我认为我应该使用2d变换属性。

通过我阅读this question的方式，它并不能解决我的问题。

这是我的代码：

HTML

  <div class="backIMg">
<!-- Greeting -->
<div class="d-flex align-items-center  flex-column text-primary greeting-container">
  <h1 class="greeting col-sm-8 text-center m-auto display-1 font-weight-bold align-items-center align-self-center "  >Welcome</h1>

</div>

  </div>

CSS

.backIMg .greeting-container{
height:100vh
}

我对Bootstrap不熟悉。预先感谢

Answer 1

您可以在.greeting-container上使用flex属性，而不是使用多个引导类。您只需添加flex属性即可使内容居中对齐并对齐。

.backIMg .greeting-container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="backIMg">
  <div class="greeting-container">
    <h1>Welcome</h1>
  </div>
</div>

Answer 2

使用：class="align-middle"，如此处所述：https://getbootstrap.com/docs/4.0/utilities/vertical-align/

<h1 class="greeting col-sm-8 text-center m-auto display-1 font-weight-bold align-items-center align-self-center align-middle"  >Welcome</h1>