方法一：直接上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
