为什么子元素设置{position:relative;left:-50%; }这里的50%是父元素宽度的50%

如题。
不理解为什么父元素设置了
wrap{float:left;position:relative;left:50%}
子元素设置了
innerWrap{position:relative;left:-50%}
子元素是向左偏移了是父元素宽度的50%。

---

因为父元素有position:relative

---

因为规范定义 left的值是百分比时使用包裹元素的宽度
<percentage> Is a <percentage> of the containing block's width, used as described in the summary.

参考 https://developer.mozilla.org/en-US/docs/Web/CSS/left

---

百分点单位基本上就是相对于当前元素的父元素的，除了transform的translate是相对自身，所以做一个水平垂直居中可以这样写

.parent {
    position: relative;
    width: xxpx;
    height: xxpx;
}
.child {
    position: absolute;
    left: 50%;
    top: 50%
    transform: translate(-50%, -50%);
    width: yypx;
    height: yypx;
}

yy < xx