三行代码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.