寫過前端的都知道，margin:auto很容易就可以做成水平居中，但要做到垂直居中卻不行，這是什么道理，難道m(xù)argin:auto真的做不到垂直居中嗎？ 錯！！！
下面講解下margin:auto如何做到垂直居中的：
方法一：使用writing-mode:vertical-lr + margin:auto垂直居中
雖然垂直居中，但水平居中失敗！！！
<style>
.father{height: 200px;width: 100%; writing-mode:vertical-lr;}
.son{height: 100px; width: 500px; margin: auto;}
</style>
<div class="father">
<div class="son">
</div>
</div>方法二：absolute+margin居中：
<style>
.father{height: 200px;position: relative;}
.son{position: absolute;top: 0;bottom: 0;left: 0;right: 0;
width: 500px;height: 100px; margin: auto;
}
</style>
<div class="father">
<div class="son"></div>
</div>雖然只能支持IE8，但年代不同，所以盡管使用吧，IE8已經(jīng)被淘汰。
關(guān)于其它居中的分享：
1、《a元素居中 position:absolute以及float:left/right都可以使用元素變?yōu)閐isplay:inline-block（塊狀元素）》
2、《垂直居中-父元素高度確定的多行文本兩個方法table+vertical-align:middle以及display:table-cell+vertical-align:middle》
3、《float:left與position:relative，left:50%+left:-50%組合居中方法》
4、《text-align:center與display:inline組合塊居中，多個行內(nèi)元素/塊狀元素居中方法》
5、《text-align:center與margin:0 auto居中區(qū)別》
6、《CSS：左右橫向居中—position:relative;left:50%;方法》
8、《CSS 元素垂直居中的 6種方法》
