我們知道瞄摊，塊級元素即使設(shè)置了寬度勤晚，也會占滿一行枉层，為什么會這樣?
因為默認(rèn)的寬度規(guī)則是“適應(yīng)于父級”規(guī)則（在水平方向上自動擴(kuò)充）泉褐。即
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設(shè)置margin：auto時膜赃，在水平方向上 margin會填充 div這一行中除了left+border-left-width+padding-left+width+padding-right+border-right-width+right的剩余的空間挺邀，當(dāng)左右的margin都設(shè)置為auto時，會平分剩余空間跳座，從而實現(xiàn)水平居中端铛。那為什么沒有按照上述同樣的方式填充垂直方向上的剩余空間呢？
因為在垂直方向上疲眷，塊級元素不會自動擴(kuò)充禾蚕，它的外部尺寸沒有自動充滿父元素，也沒有剩余空間可說狂丝。所以margin：auto不能實現(xiàn)垂直居中换淆。
那用margin：auto可以實現(xiàn)垂直居中嗎，答案是肯定的几颜。
.father {
? ? width: 300px; height:150px;
? ? position: relative;
}
.son {
??? position: absolute;
? ? top: 0; right: 0; bottom: 0; left: 0;
? ? width: 200px; height: 100px;
? ? margin: auto;
}
當(dāng)一個絕對定位元素倍试，其對立定位方向?qū)傩酝瑫r有具體定位數(shù)值的時候，流體特性就發(fā)生了蛋哭。
具有流體特性絕對定位元素的margin:auto的填充規(guī)則和普通流體元素一模一樣：
如果一側(cè)定值县习，一側(cè)auto，auto為剩余空間大凶恢骸躁愿；
如果兩側(cè)均是auto, 則平分剩余空間
因為此時.son這個元素的尺寸表現(xiàn)為“格式化寬度和格式化高度”。即.son這個元素的尺寸自動填充父級元素的可用尺寸沪蓬。
總結(jié)：通過position:absolute 和 top:0 bottom:0將元素設(shè)為流體特性的元素彤钟，這樣該元素可自動填充父級元素的可用尺寸。
格式化寬度：格式化寬度僅出現(xiàn)在“絕對定位模型中”怜跑，也就是出現(xiàn)在position屬性值為absolute或fixed的元素中样勃。
對于非替換元素，當(dāng)left/right或top/bottom對立方位的屬性值同時存在時性芬，元素的寬度表現(xiàn)為“格式化寬度”峡眶，其寬度大小相對于最近的具有定位特性的祖先元素計算。
“格式化寬度”具有完全的流動性植锉，也就是margin辫樱、border、padding俊庇、content內(nèi)容區(qū)域同樣會自動分配水平和垂直空間狮暑。
參考：
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
