平时会经常遇到垂直居中的问题,其实最简单的方法是用 tablevertical-align 属性。

父元素样式设为

display: table;

子元素样式设为

display: table-cell;
vertical-align: middle;

具体可以参考 JsFiddle 上的示例

关于vertical-align的具体用法,可以看 MDN 文档