Question

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

Answer 1

我们知道，块级元素即使设置了宽度，也会占满一行，为什么会这样?

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

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