写过前端的都知道，margin:auto很容易就可以做成水平居中，但要做到垂直居中却不行，这是什么道理，难道margin: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已经被淘汰。
关于其它居中的分享：
1、《a元素居中 position:absolute以及float:left/right都可以使用元素变为display: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组合块居中，多个行内元素/块状元素居中方法》
5、《text-align:center与margin:0 auto居中区别》
6、《CSS：左右横向居中—position:relative;left:50%;方法》
8、《CSS 元素垂直居中的 6种方法》
