具有背景和垂直居中文字的相對div

Question

我需要使div具有90％的高度屏幕，其中包含圖像背景和垂直居中的文本。

我用double div。

對於90％的高度，我使用min-height：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/

如何拉伸第二個背景圖像和垂直居中的文本？

謝謝。

Answer 1

您可以通過定義你的包裝容器，實現這一目標one是相對位置和內部的div絕對。 借助margin: auto ，然后可以將絕對定位的塊元素居中。 更改您的小提琴將是這樣的：

<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/

Answer 2

您可以嘗試做的2件事：

將其添加為圖片min-height: 100%; max-height: 100%; min-height: 100%; max-height: 100%;
或添加重復，以便它將在您想要的寬度和高度上重復該圖片。 background-image: url('post.png') repeat;

Answer 3

這是使用多個背景和變換的簡化且精簡的解決方案： http : //jsfiddle.net/fkdpr10v/ 。

HTML：

<div id = "main">
    <div>
        <h1>Заголовок</h1>
        <p>текст</p>
        <p>Много другого текста.</p>
        <p>Много другого текста.</p>
        <p>Много другого текста.</p>
        <p>Много другого текста.</p>
        <p>Много другого текста.</p>
    </div>
</div>
<p>More text below</p>

CSS：

* {
    padding: 0;
    margin: 0;
}

body {
    padding: 10px;
    background-color: green;
}

#main {
    position: relative
    text-align: center;
    color: white;
    height: 90vh;
    min-height: 90vh;
    background: url('https://imgurhd.ru/i/25s4.png'), 
                url('https://imgurhd.ru/i/25s3.jpg') no-repeat center center/cover;
}

#main > div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}