html - 如何使用 bootstrap 将

Question

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

h1 应该代替黄色突出显示，但这不起作用。

我不想使用任何 jquery 或 javascript，因为我想练习 bootstrap。

我不知道为什么，但我认为我应该使用 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 属性，而不是使用多个 Bootstrap 类。您只需添加 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>