視差の背景画像に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

だけparallaxクラスにposition: relativeを適用し、parallax_textクラスに次のCSSを適用します。

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