通常使用的垂直居中方法：
1 <style> 2 div{ 3 width:100px; 4 height:100px; 5 top:50%; 6 left:50%; 7 margin-left:-50px; 8 margin-top:-50px; 9 position:absolute; 10 text-align:center; 11 inline-height:100px; 12 } 13 </style>
这种方法不方便的地方是一旦块级元素的宽高度变了后，需要随之改变margin的值，
所以使用translate进行优化：
<style> div{ width:100px; height:100px; top:50%; left:50%; transform：translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); position:absolute; text-align:center; inline-height:100px; } </style>
这样无论块级元素宽高如何变，都可以保证垂直居中。
原文：http://www.cnblogs.com/Bideam/p/6757112.html