Question

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

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

这是我到目前为止的代码：

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>

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;
}
.thank-you-message h1 {
  color: #FFFFFF;
}

Answer 1

您可以使用translate：

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

https://jsfiddle.net/4ehmpdq5/

Answer 2

您只需添加

即可

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

见这个

fiddle

Answer 3

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

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

使用Bootstrap时，在容器中垂直居中文本？

3 个答案:

fiddle