Question

我希望文本（.herotext）完全位于背景图像（.herobanner）的垂直和水平中心。此文本旨在覆盖图像，就像滑块/旋转木马一样。

我尝试使用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

一种解决方案

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你总是需要一个包装div来垂直定位，直到CSS把它放在一起并允许在非表格情况下进行垂直对齐。

Plunkr：http://plnkr.co/edit/aaTGmjwYlH5nZzgW4IJL

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

将背景图像上的重叠文本居中

2 个答案: