三行代码CSS竖向居中

 .element{
    position:relative;
    top:50%;
    transform:translateY(-50%);
 }

这里无需设置高度或者父元素的position属性。（IE9可用）

如果想兼容老浏览器。

.parent-element{
   -webkit-transform-style:preserve-3d;
}

1 .element{
    position:relative;
    top:50%;
    -webkit-transform: translateY(-50%);
    -ms-transform:translateY(-50%);
    transform: translateY(-50%);
 }

然而，元素沿translateY移动时会损失半个像素导致元素模糊，则使用preserve-3d 对 parent-element.