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/

如何拉伸第二张背景图像和垂直居中的文字？

感谢。

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

你可以做的两件事：

为图片添加此项 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%);
}

相对div与背景和垂直居中的文本

3 个答案: