Question

所以我无法弄清楚这一点。我正试图让一个红色的垂直框显示在页面中间。我已将div的余量设为auto。然后是另一个包含居中文本的div。两者都设置自动上限。它们在页面中间堆叠在彼此之上。

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

HTML＆amp; 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>

Answer 2

我为你做了这个。 https://jsfiddle.net/95ssv6q1/

<强> HTML

<div class="parentDiv">
   <div class="inner">
     <div id="RedBox">
     </div>
   </div>
</div>

<强> CSS

.parentDiv {
     display:table;
     width: 100%;
     height: 100%;
     position: absolute;
 }
 .inner{
     display: table-cell;
     vertical-align:middle;
 }
 #RedBox {
    width: 250px;
    height: 450px;
    background-color: #FF0000;
    margin: auto;
}

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

2 个答案: