为什么top left right bottom 都设置0，再margin: auto 就可以将元素垂直水平居中？

Question

div{
            width: 200px;
            height: 200px;
            background: green;
            position:absolute;
            left:0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }

如上，为什么要把top left right bottom 都设置为0？少一个都不会居中，原理是什么

Answer 1

以水平方向为例子，绝对定位的元素:

left + 
margin-left + 
border-left + 
padding-left + 
width + 
padding-right +
border-right +
margin-right +
right = 
包含块

width为定值，padding, border默认为0/none，left、right为0，那么margin-left和margin-right为auto，则平分剩余空间，居中。

---

规范链接

Answer 2

需要在各个方向达到平衡，自然就居中了