如何在相對父級的填充頂部內垂直對齊div

Question

我試圖垂直對齊圖像的中間幾行文字，該圖像也以其自己的div為中心。

圖片和文本div的父div都是響應式的。

我對齊圖片的方式似乎阻止了文本對齊。 我嘗試使用表和其他解決方案（也在堆棧溢出中找到），但是似乎沒有任何效果。

我究竟做錯了什么？

 .parent-wrapper { position: absolute; width: 100%; border-bottom: 1px solid #bfbfbf; border-top: 1px solid #bfbfbf; margin-top: 1vw; margin-bottom: 1vw; } .image-wrapper { position: relative; float: left; width: 30%; padding-top: 30%; } .image { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: no-repeat; background-size: cover; background-position: center; min-width: 100%; } .text-wrapper { position: relative; float: right; width: 70%; padding-top: 30%; overflow: hidden; } .text-details { position: absolute; top: 0; bottom: 0; left: 0; right: 0; vertical-align: middle; background: center; } .some-text { font-size: 20px; } .other-text { font-size: 20px; } .another-text { font-size: 20px; } 

 <div class="parent-wrapper"> <div class="image-wrapper"> <div class="image" style="background-image: url('folder/picture.jpg');" alt="image"> </div> </div> <div class="text-wrapper"> <div class="text-details"> <div class="some-text">some text</div> <div class="other-text">other text</div> <div class="another-text">another text</div> </div> </div> </div> 

Answer 1

嘗試這個

 .parent{ position:relative; height:50vh; background-color:blue; } .box-to-center{ position:absolute; top:50%; transform: translateY(-50%); color:white; } 

 <div class="parent"> <div class="box-to-center"> some content </div> </div>