html - 如何在相对父级的填充顶部垂直对齐一个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>