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

垂直居中：

方法一：

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