以 display flex 将具有绝对位置的子元素居中

Question

如何 center/middle 具有绝对位置的子元素。在具有 display flex 的父级上？

<div class="parent">
  <div class="child">
    Object
  </div>
</div>

.parent{
  display: flex;
  align-items: center;
}

.child{
  position: absolute;
}

子元素必须与父元素重叠。

Answer 1

试试这个

.parent{
display: flex;
   justify-content: center;
   align-items: center;
   position: absolute;
   width:100%;
   height: 100%;
}

.child{
  position: absolute;
  background-color:#f00;
  border:1px solid #333;
  
}

<div class="parent">
  <div class="child">
    Object
  </div>
</div>

以 display flex 将具有绝对位置的子元素居中

Centering child that has position absolute to a parent with display flex

css

css-position

centering

flexbox