margin-left:-50px的作用相当于从left：50%中减去50px, 这是为什么？

.x1{
        height:500px;
        position:relative;
        background-color:pink;
        width:600px;
    }
    .x2{
        width:100px;
        height:200px;
        position:absolute;
        left:50%;
        top:50%;
        margin-top:-100px;
        margin-left:-50px;
        background-color:yellow;
    }
    

<div class="x1">
    <div class="x2">
    </div>
</div>

从上述代码中，margin-left:-50px的作用相当于从left：50%中减去50px, 这是为什么？按照层叠顺序，x2不是应该部分超出x1范围吗？

---

left：50%是元素最左边（左上角）和中线重合的地方，这个时候是不居中的，需要减去该元素的宽度一半，即margin-left等于负的宽度的一半

---

外边距margin取负数，大小为width/height的一半，再加上top: 50%; left: 50%，就可以水平垂直居中了。

---

left: 50%;top:50%;即x2的左上角在x1的中心，在加上margin-left:-50px;margin-top:-100px;（这里分别是width，height的一半），就可以让x2在x1中居中了。