如果父级具有 100% 高度，如何对齐块高度

HTML中有以下代码：

<section id="hello_section">
  <div class="hello_section_wrapper">
   <div class="hello_section_text_wrapper">
    <h1>Imagine your home smart enough <strong class="hello_section_green_text">to take care</strong> of itself.</h1>
    <p>Turn your home into a smarthome today with a simple & affordable upgrade. Discover the upgrade that automates home maintenance.</p>
    <div class="hello_section_btns">
      <a class="hello_section_green_btn" href="#">Get Started</a>
      <a class="hello_section_clear_btn" href="#">Learn More</a>
    </div>
   </div>
   <div class="hello_section_img_wrapper">
     <img class="hello_section_img1" src="img/hello_section_img1.png" alt="Interior image">
     <img class="hello_section_img2" src="img/hello_section_img2.png" alt="Interior image">
   </div>
 </div>
</section>

还有这些风格：

#hello_section {
  width: 100%;
  height: 100vh;
  background: url('img/hello_section_bg.svg') -5px 0/1200px no-repeat;
}
.hello_section_wrapper {
  margin: auto;
  width: 90%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hello_section_text_wrapper {
  width: 600px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
}
.hello_section_btns {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.hello_section_img_wrapper {
  width: 50%;
  height: 100%;
  overflow: hidden;
}
.hello_section_img2 {
  transform: translate(200px, -200px);
}

问题是如何使 hello_section_text_wrapper 和 hello_section_img_wrapper 块相对于 hello_section_wrapper 垂直对齐。我知道问题是我的高度表示为父块的百分比，其中高度也是百分比，但我不知道如何以不同的方式进行。希望得到帮助。谢谢