我们知道，块级元素即使设置了宽度，也会占满一行，为什么会这样?
因为默认的宽度规则是“适应于父级”规则（在水平方向上自动扩充）。即
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内容区域同样会自动分配水平和垂直空间。
参考：
https://www.zhangxinxu.com/wordpress/2013/11/margin-auto-absolute-%e7%bb%9d%e5%af%b9%e5%ae%9a%e4%bd%8d-%e6%b0%b4%e5%b9%b3%e5%9e%82%e7%9b%b4%e5%b1%85%e4%b8%ad/
https://blog.csdn.net/Mr_lizi/article/details/83384468
网友评论