margin:auto 的作用机制。

使用margin:auto居中，是css的基本操作。但会发现时不时的失灵。 这篇文章是对该属性的深度分析。

首先，以下事实（自动填充）必须明确

（1）有时候元素就算没有设置width 或height，也会自动填充。例如：

<

（2）有时候元素就算没有设置width 或height，也会自动填充对应的方位。例如：

div 

自动填充失效的弥补

对元素（比如 <div>）如果设置元素的 width 或height，自动填充特性就会被覆盖。

/*例如：*/
div { width: 200px; }

此时，<div>元素宽度被限制成了200px，无法自动填充外部容器的可用宽度了。

假设外部的容器宽度大于200，则有宽度原本应该自动填充，现在因为width设置而闲置，而margin:auto 就是为了填充这个闲置的尺寸而设计的！

margin:auto 的填充规则如下。

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

实例：1. 拿规则（1）实现元素局右效果

.father {width:400px;height: 200px;background: pink;
}
.son {width: 200px;height: 150px;background: #ff00dd;margin-left: auto; 
}<div class='father'><div class='son'></div>
</div>

因为son元素 margin-right缺省，而自动填充初始值0； margin-left：auto会占据所有空间

实例：2. 水平居中（两边均是auto即可）

实例：3. 垂直居中

绝对定位元素的margin居中。

.

此时.son 这个元素的尺寸表现为“格式化宽度和格式化高度”（top:0;right:0;bottom:0;left:0;），和<div>的“正常流宽度”一样，同属于外部尺寸，也就是尺寸自动填充父级元素的可用尺寸，
此时我们给.son 设置尺寸（width:200px;height:100px;）。那么宽高被限制，原本应该填充的空间就被空余了出来
这多余的空间就是margin:auto 计算的空间，因此，如果这时候我们再设置一个margin:auto：