关于块级元素margin:0 auto水平布局居中的问题

前端开发中，一个固定宽度的块级元素让它相对父元素水平居中，最简单的方法就是设置该块级元素的margin属性值为：“0 auto”，十分简单。但是为什么让外边距的左右值设置为auto会让布局直接水平居中呢？

因为一个元素在其父元素中，水平布局必须要满足以下等式：

margin-left + border-left  +padding-left + width + padding-right + border-right + margin-right = 其父元素的宽度

如果相加结果使等式不成立，则称为过渡约束，等式会自动调整到成立

    调整的规则如下：

    1、如果这七个值中没有为auto的情况，则浏览器会自动调整margin-right的值使等式成立

    2、width，margin-left，margin-right此三个值可设置为auto，若其中某个值为auto，则浏览器会自动调整auto使等式成立

            a、若width为auto(不设置width值，默认为auto)，则margin-left,margin-right为0，宽度最大

            b、若width和左右其中一个margin值为auto，则设为auto的margin为0，宽度调整到最大

            c、若两个外边距为auto，宽度固定值，则会将两个外边距设置为相同值（水平居中的原理）