为什么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

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