垂直居中，水平居中的一些方法

2019独角兽企业重金招聘Python工程师标准>>>

垂直居中：

方法一：

使用CSS3中的 transform: translateY 属性。不需要知道父元素有多高，也没有用到绝对定位。

css代码：

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

如果想兼容老式的浏览器，你需要在 transform 属性前添加浏览器引擎前缀。为了更加简化，我们可以把它写成一个mixin：

@mixin vertical-align {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.element p {  @include vertical-align;
}

此方法有个小问题就是在沿translateY移动时会损失‘半个像素’，导致元素变得模糊，解决方法是使用preserve-3d属性。代码如下：

.parent-element {  -webkit-transform-style: preserve-3d;}.element {  position: relative;
  top: 50%;
  transform: translateY(-50%);}

转载于:https://my.oschina.net/u/2362038/blog/672110