html - 具有背景和垂直居中文本的相对 div

Question

我需要制作占屏幕高度 90% 的 div，其中包含图像背景和垂直居中文本。

我使用双 div。

对于 90% 的高度，我使用 最小高度:90vh；

我的完整 html 代码如下所示:

<div class="one">
    <div class="two">
        <div class="three">
            <h1>Заголовок</h1>
            <p>пилорама текст</p>
                       <p> Много другого текста.</p>
           <p> Много другого текста.</p>
           <p> Много другого текста.</p>
           <p> Много другого текста.</p>
           <p> Много другого текста.</p>
                    <h1>Заголовок</h1>
            <p>пилорама текст</p>
                       <p> Много другого текста.</p>
           <p> Много другого текста.</p>
           <p> Много другого текста.</p>
           <p> Много другого текста.</p>
           <p> Много другого текста.</p>
        </div>
    </div>
</div>

我的 CSS 文件如下所示:

.one {
  text-align: center;
  color: white;
  background-repeat: no-repeat;
  background-position: center;
  min-height: 90vh;
  background-color: black;
  background-size: cover;
  background-image: url('1501.jpg');

}

.two{
    background-image: url('post.png');
    top:0;
    right:0;
    bottom:0;
    left:0;
    vertical-align: middle;
}

您可以在 jsfiddle 上查看它的外观:http://jsfiddle.net/gumbert/ddkd1bs9/3/

如何拉伸(stretch)第二个背景图像和垂直居中的文本？

谢谢。

Answer 1

您可以通过将包装容器 one 定义为相对位置并将内部 div 定义为绝对来实现此目的。 在 margin: auto 的帮助下，您可以将绝对定位的 block 元素居中。对你的 fiddle 的改变是这样的:

<div class="one">
    <div class="two">
        <div class="content">
            ....
        </div>  
    </div>
</div>

.one {
     // ...
     position: relative;
}

.two{
    // ...
    position:absolute;
}

.content {
     display:table;
     width:100%;
     position:absolute;
     top:0;
     bottom:0;
     margin-top:auto;
     margin-bottom:auto;
 }

http://jsfiddle.net/ddkd1bs9/11/