Html 使用引导时，容器中的文本是否垂直居中？

在过去的几天里，我一直在努力弄清楚如何正确地将文本垂直居中。还有一个全宽背景图像

我希望文本保持居中，无论封闭容器的高度如何

以下是我目前掌握的代码：

HTML:

<header class="thank-you">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="thank-you-message">
          <h1>Thank you</h1>
        </div>
      </div>
    </div>
  </div>
</header>

.thank-you {
  text-align: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  background: #000000;
  height: 500px;
}
.thank-you-message h1 {
  color: #FFFFFF;
}

您只需添加

line-height:500px;
vertical-align:middle;

到您的css：

.thank-you {
  text-align: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  background: #000000;
  height: 500px;
    line-height:500px;
    vertical-align:middle;
}

看到这个了吗

您只需添加

line-height:500px;
vertical-align:middle;

到您的css：

.thank-you {
  text-align: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  background: #000000;
  height: 500px;
    line-height:500px;
    vertical-align:middle;
}

看到这个了吗

---

您可以使用

翻译
：

h1{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;  
}

您可以使用
翻译
：

h1{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;  
}

最通用的解决方案是使用flexbox：

.thank-you-message{
  display: flex;
  justify-content: center;
  align-items: center;
}

最通用的解决方案是使用flexbox：

.thank-you-message{
  display: flex;
  justify-content: center;
  align-items: center;
}

当您有多行文本时，此解决方案不是很优雅。当您有多行文本时，此解决方案不是很优雅。