css - 将div垂直和水平放在div中，绝对位置

因此，我想在“ 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>

谢谢你的帮助。

最佳答案

你自己看。请参阅CSS中有关您需要包含的内容的注释。

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%;
}

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