div中心div垂直和水平，位置绝对

Question

所以我想在“outerDiv”中垂直和水平居中“innerDiv1”。

“innerDiv1”必须是绝对位置，所以“innerDiv2”可以超过它。

我尝试过行高，这不起作用，因为“outerDiv”可以改变大小。行高不会对我想要的百分比做出反应。

这是我的代码段：

html, body {
  margin: 0;
}

.wrapper {
  background: lightblue;
  width: 300px;
  height: 300px;
}

.outerDiv {
  background: red;
  height: 50%;
  width: 50%;
}

.innerDiv1 {
  background: seagreen;
  position: absolute;
}

.innerDiv2 {
  background: rgba(255,255,255,0.5);
  height: 100%;
}

<div class="wrapper">
  <div class="outerDiv">
    <div class="innerDiv1">Hello World!</div>
    <div class="innerDiv2"></div>
  </div>
</div>

感谢您的帮助。

Answer 1

亲自看看。请参阅CSS中有关您需要包含的内容的评论。

＆＃13;

＆＃13;

html, body {
  margin: 0;
}

.wrapper {
  background: lightblue;
  width: 300px;
  height: 300px;
  position: relative; /* 1. Add this. */
}

.outerDiv {
  background: red;
  height: 50%;
  width: 50%;
  position: absolute;
  top: 25%; /* 2. Add this. */
  left: 25%; /* 3. Add this. */
}

.innerDiv1 {
  background: seagreen;
  position: absolute; /* 4. Add this. */
  top: 50%; /* 5. Add this. */
  left: 50%; /* 6. Add this. */
  transform: translate(-50%, -50%); /* 7. Add this. */
  text-align: center; /* 8. Add this if you want the text to be centered. */
}

.innerDiv2 {
  background: rgba(255, 255, 255, 0.5);
  height: 100%;
  top: 50%;
  left: 50%;
}

＆＃13;

<div class="wrapper">
  <div class="outerDiv">
    <div class="innerDiv1">Hello World!</div>
    <div class="innerDiv2"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

将此添加到您的css：

.outerDiv {
  position: relative;
}

.innerDiv1 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
}