方法一：直接上table
我們都知道，td里很容易做到左右垂直居中，並且沒有任何的兼容性問題。
方法二：display:table-cell + vertical-align:middle
和table的原理比較像，把div模擬成一個td，不過好多低端瀏覽器不識別display:table-cell。
如果想兼容IE67，需要增加一個節點：
div{vertical-align:middle; display:table-cell; text-align:center; width:200px; height:200px}
img{vertical-align:middle; }
i{ height:100%; display:inline-block; vertical-align:middle;}
以上各元素缺一不可。
方法三：定位50%+margin負值
沒有兼容性問題。margin的值是自己寬高的一半。所以，此方法不適用未知寬高的元素。
方法四：display:flex + align-items:center
先指定父元素為伸縮盒模式，然后為其子元素指定為：align-items:center。目前伸縮盒只為高端瀏覽器支持，且flex本身是一個過渡屬性，以chrome為例，為了兼容各種版本，最好一次寫全，否則會帶來不必要的麻煩（嗯，我親身遇到過，P1級故障。因為涉及到布局，所以更應該慎重）：
display:-webkit-box;
display:-webkit-flex;
display:flex;
順序是從舊到新，所以不能亂。
方法五：display:flex + margin:auto
在常規布局模式中，margin：auto僅能達到水平方向的左右居中，也就是說，margin:auto = margin:0 auto；但是，在flex環境下，margin:auto是真auto，上下左右都可以居中的。就是這么簡單~~~
方法六：定位 + margin:auto
將父元素設置固定寬高以及positon:relative;然后將子元素設置為positon:absolute，並將其四個方位的值都置為0;同時指定margin:auto。兼容性，IE8+。
轉載地址
http://blog.sina.com.cn/s/blog_448f59f301013axj.html