html - 在背景图像上居中叠加文本

Question

我希望文本 (.herotext) 完美地位于背景图像 (.herobanner) 的垂直和水平中心。此文本旨在覆盖图像，就像使用 slider /旋转木马一样。

我尝试用 margin: 0 auto 来做这件事，但没有任何结果

CSS

.herobanner {
    height:500px;
    width:100%;background:#000;
    background-size:cover !important;
    background-repeat: no-repeat;
    background: url(../img/head.jpg) center
}

.herotext {
    color:#fff;
    text-align: center;
    margin: 0 auto;
}

HTML

<div class="herobanner">
    <h1 class="herotext">Hello</h1>
</div>

Answer 1

一个解决方案

.herobanner {
  height: 500px;
  width: 100%;
  background: #000;
  background-size: cover !important;
  background-repeat: no-repeat;
  background: url(../img/head.jpg) center;
  background: lightblue;
  display: table;
  border: 1px solid grey;
}
.herotext {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

<div class="herobanner">
  <h1 class="herotext">Hello</h1>

</div>