javascript - 如何将文本和 Div 放在彼此的顶部并将它们居中对齐？

Question

所以我无法弄清楚这一点。我试图让一个红色的垂直框显示在页面中间。我已将 div 的边距设置为自动。然后还有另一个包含居中文本的 div。两者都设置边距自动。它们都在页面中间堆叠在一起。

但是我希望它能够响应所有高度。现在它只响应 x 轴而不是高度。

HTML 和 CSS:

.parentDiv {
  position: relative;
  width: 250px;
  height: 450px;
  margin: auto;
}
#RedBox {
  width: 250px;
  height: 450px;
  background-color: #FF0000;
  margin: auto;
}
#CSText {
  position: absolute;
  top: 45%;
  width: 250px;
  color: black;
  text-align: center;
}

<div class="parentDiv" style="margin-top: auto;">
  <div id="CSText" class="TextAlignCenter">
  </div>
  <div id="RedBox">
  </div>
</div>

Answer 1

flexbox 将是一个很好的解决方案:

.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.red-box {
  background-color: red;
  padding: 100px;
  color: white;
}

<div class="container">
  <div class="red-box">text</div>
</div>