元素垂直居中五种方法

1. hack：
   position:absolute;
   margin:auto;
   top:0;
   right:0;
   bottom:0;
   left:0;

2. 父级写：
   display:flex;
   align-items:center; //垂直居中
   justify-content:center;//水平居中

3. 绝对定位：
   position:absolute;
   top:50%;
   left:50%;
   margin-top:-200px;//当前元素高度的一半
   margin-left:-100px;//当前元素宽度的一半

margin:0 auto;
line-height:100px; //当前元素的高度

5. css3的
   position:absolute;
   top:50%;
   left:50%;
   -ms-transform: translate(-50%,-50%); /* IE 9 /
   -webkit-transform: translate(-50%,-50%); / Safari and Chrome /
   -o-transform: translate(-50%,-50%); / Opera /
   -moz-transform: translate(-50%,-50%); / Firefox */
   transform: translate(-50%,-50%);

附上参考张鑫旭的链接：
http://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/