我怎样才能中心div在视差背景图像

Question

我想水平和垂直居中div与视差背景图像。我试过bootstrap 4类d-block,mx-auto,text-center。它将其水平居中，但不是垂直居中。我怎样才能让它垂直居中呢？

.parallax_bg { 
 
    background: url(assets/img/corinne-kutz-211251.jpg); 
 
    background-size: cover; 
 
    height: 100%; 
 
    min-height: 100%; 
 
    overflow: auto; 
 
} 
 

 
.parallax { 
 
    background-attachment: fixed; 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
} 
 

 
.parallax_text > p { 
 
    font-size: 20px; 
 
}

<section data-stellar-background-ratio="0.5" class="parallax parallax_bg text-center mx-auto d-block"> 
 
    <div class="parallax_text"> 
 
    <h3><em>Venenatis Nisl Porta</em></h3> 
 
    <p>Lorem vestibulum gravida ipsum non velit aliquam</p> 
 
    <a class="btn btn-primary mt-3" href="#">Read More&nbsp;<i class="fa fa-angle-double-right" aria-hidden="true"></i></a> 
 
    </div> 
 
</section>

Answer 1

只是适用position: relative到parallax类，然后应用下面的CSS到parallax_text类：

.parallax_text { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%) 
} 

Answer 2

你可以试着弯曲这样的：

.parallax_bg { 
 
    background: url(https://lorempixel.com/400/400/); 
 
    background-size: cover; 
 
    height: 100%; 
 
    min-height: 100%; 
 
    overflow: auto; 
 
} 
 

 
.parallax { 
 
    background-attachment: fixed; 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    height: 120vh; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.parallax_text { 
 
    background: #fff; 
 
} 
 

 
.parallax_text>p { 
 
    font-size: 20px; 
 
}

<section data-stellar-background-ratio="0.5" class="parallax parallax_bg text-center mx-auto d-block"> 
 
    <div class="parallax_text"> 
 
    <h3><em>Venenatis Nisl Porta</em></h3> 
 
    <p>Lorem vestibulum gravida ipsum non velit aliquam</p> 
 
    <a class="btn btn-primary mt-3" href="#">Read More&nbsp;<i class="fa fa-angle-double-right" aria-hidden="true"></i></a> 
 
    </div> 
 
</section>