三行代码CSS竖向居中

1 .element{
2    position:relative;
3    top:50%;
4    transform:translateY(-50%);
5 }

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

如果想兼容老浏览器。

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

1 .element{
2    position:relative;
3    top:50%;
4    -webkit-transform: translateY(-50%);
5    -ms-transform:translateY(-50%);
6    transform: translateY(-50%);
7 }

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

 

转载于:https://www.cnblogs.com/ming-os9/p/8891347.html