html - 如何在页面中心的绝对 div 中静态定位绝对 div

Question

这是我正在使用的代码笔：https ://codepen.io/marcdaframe/pen/ExajEXK

我希望能够将绿色 div 静态地居中在屏幕的中心，并允许它随着屏幕滚动，但是我不能从这个结构中删除它。

逃避绝对位置父母以允许.abs3 div在屏幕上静态居中的最佳方法是什么

.wrapper{
  position: relative;
  width: 100vw;
  height: 4000px;
  display: block;
  background-color: black;
}
.abs1{
  position: absolute;
  background-color: red;
  width: 300px;
  height: 300px;
}

.abs2{
  position: absolute;
  background-color: blue;
  width: 200px;
  height: 200px;
}

.abs3{
  position: absolute;
  background-color: green;
  width: 100px;
  height: 100px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%)
}

<div class="wrapper">
<div class="abs1">
  <div class="abs2">
    <div class="abs3"/>
  </div>
</div>
</div>

标签： htmlcss