Центр div в div вертикально и горизонтально, абсолютное положение

Question

Так что я хочу центрировать «innerDiv1» по вертикали и горизонтали в «externalDiv».

«innerDiv1» должен быть абсолютным положением, чтобы «innerDiv2» мог перекрывать его.

IЯ пробовал высоту строки, это не работает, потому что "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:

.outerDiv {
  position: relative;
}

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

Answer 2

Убедитесь сами.Смотрите комментарии в 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>