本文为思路提示篇，因此未详细述说代码，主要总结思路。
1. dispaly：table-cell；
vertical-align：middle；
2.
下面这个样式利用了translate来巧妙实现了垂直居中样式，需IE9+。
.center-vertical { position: relative; top: 50%;
/*这里是相对父元素的宽高来说的，这里的50%；*/ transform: translateY(-50%);
或者margin一个负的自身高度 }
3. 父元素 relative
其本身absolute;方法同上，top：50%；
4. flexbox
原文：http://www.cnblogs.com/nostic/p/5793274.html