前端开发中，一个固定宽度的块级元素让它相对父元素水平居中，最简单的方法就是设置该块级元素的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，宽度固定值，则会将两个外边距设置为相同值（水平居中的原理）
网友评论