Position (позиционирование дочернего элемента по центру экрана)

Web Frontend: JavaScript, HTML/CSS
#1

Здравствуйте.
Подскажите как из родителя блока div с position: fixed вывести дочерний блок div по центру экрана вне зависимости от разрешения.
Пробовал сделать так

<style>
 .div1{
  position: fixed;
  width: 300px;
  height: 300px;
  border: 1px solid blue;
 }
 .div2{
  background: red;
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
 }
</style>

<div class="div1">
 <div class="div2">
   Content
 </div>
</div>

В этом случае дочерний блок див центруется только в пределах своего родителя

#2

То есть, дочерний блок должен игнорировать родителя и располагаться по центру экрана? Зачем ему тогда родитель нужен? Какую задачу вы решаете?

Элемент, имеющий абсолютное позиционирование, всегда позиционируется относительного своего ближайшего родителя с нестатическим позиционированием, или, если такового нет, элемента body.

Если требуется позиционирование по центру экрана, то:

  1. либо уберите родителя, а для оставшегося блока напишите
  top: 50%;
  left: 50%;
  tranform: translate(-50%, -50%);

убрав margin, right и bottom;

  1. Либо, если требуется родитель, то…
<div class="parent">
  <div class="child">content</div>
</div>

.parent {
  position: absolute; 
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.child {
  background: red;
  width: 100px;
  height: 100px;
}