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

垂直居中：

方法一：

使用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%);}