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