CSS margin:auto

margin:auto 的填充规则

margin的’auto’可不是摆设，是具有强烈的计算意味的关键字，用来计算元素对应方向应该获得的剩余间距大小。
但是触发margin:auto计算有一个前提条件，就是width或height为auto时，元素是具有对应方向的自动填充特性的。

（1）如果一侧定值，一侧auto，则auto为剩余空间大小。
（2）如果两侧均是auto，则平分剩余空间。

margin：auto为什么只能实现水平居中，不能实现垂直居中

块级元素即使设置了宽度，也会占满一行

是因为默认的宽度规则是“适应于父级”规则（在水平方向上自动扩充）。即

margin-left+border-left-width+padding-left+width+padding-right+border-right-width+margin-right= width of containing block

对于绝对定位元素，有以下算式：

left+margin-left+border-left-width+padding-left+width+padding-right+border-right-width+margin-right+right= width of containing block

而auto的作用是：自动填充剩余空间， 所以给div设置margin：auto时，在水平方向上 margin会填充 div这一行中除了left+border-left-width+padding-left+width+padding-right+border-right-width+right的剩余的空间，当左右的margin都设置为auto时，会平分剩余空间，从而实现水平居中。那为什么没有按照上述同样的方式填充垂直方向上的剩余空间呢？

因为在垂直方向上，块级元素不会自动扩充，它的外部尺寸没有自动充满父元素，也没有剩余空间可说。所以margin：auto不能实现垂直居中。

那用margin：auto可以实现垂直居中吗，答案是肯定的。

.father {width: 300px; height:150px;position: relative;}.son {position: absolute;top: 0; right: 0; bottom: 0; left: 0;width: 200px; height: 100px;margin: auto;}

当一个绝对定位元素，其对立定位方向属性同时有具体定位数值的时候，流体特性就发生了。

具有流体特性绝对定位元素的margin:auto的填充规则和普通流体元素一模一样：

如果一侧定值，一侧auto，auto为剩余空间大小；

如果两侧均是auto, 则平分剩余空间

因为此时.son这个元素的尺寸表现为“格式化宽度和格式化高度”。即.son这个元素的尺寸自动填充父级元素的可用尺寸。

总结：通过position:absolute 和 top:0 bottom:0将元素设为流体特性的元素，这样该元素可自动填充父级元素的可用尺寸。

格式化宽度：格式化宽度仅出现在“绝对定位模型中”，也就是出现在position属性值为absolute或fixed的元素中。

对于非替换元素，当left/right或top/bottom对立方位的属性值同时存在时，元素的宽度表现为“格式化宽度”，其宽度大小相对于最近的具有定位特性的祖先元素计算。

“格式化宽度”具有完全的流动性，也就是margin、border、padding、content内容区域同样会自动分配水平和垂直空间。

参考：
链接