当子项绝对定位时，将子项置于父项的中心

Question

有没有办法将absolute已定位的元素定位到其已定位的父元素的中心relative？

我在想是否可以以某种方式计算父级的宽度，并据此将子级居中？但不确定从哪里开始，是使用 JavaScript 还是 CSS。

这是可供参考的代码笔

Answer 1

.tooltip {
  /* 
    position the top-left corner of the element 
    in the center of the parent 
  */
  position: absolute;
  top: 50%;
  left: 50%;
  /*
    move the (positioned) element up and left 
    by half its own width/height
  */
  transform: translate(-50%, -50%);
}


.container,
.tooltip{
  border: 2px solid black;
  padding: 10px;
}

.container {
  position: relative;
  width: 80vw;
  height: 50vh;
}

<div class="container">
  <div class="tooltip">Tooltip</div>
</div>

top百分比left是该维度在父元素上的百分比。

而 中的百分比translate是相对于元素本身的。