具有绝对位置的居中子级与显示 flex 的父级 [重复]答案

【问题标题】：Centering child that has position absolute to a parent with display flex [duplicate]具有绝对位置的居中子级与显示 flex 的父级 [重复]
【发布时间】：2019-02-01 19:14:37
【问题描述】：

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

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

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

.child{
  position: absolute;
}

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

【问题讨论】：

位置：相对于父级和经典居中
将父元素设置为相对，之后，您可以像往常一样居中他的孩子。 stackoverflow.com/questions/1776915/…
将justify-content: center; 添加到父级
当我这样做时，它仍然不在中间。
现在可以使用了，谢谢！

标签： css flexbox css-position centering

【解决方案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>

【讨论】：

感谢它现在工作我不得不添加转换：translate(0, -50%);把它放在中间。