竖向居中最简单的方法(三行CSS3代码)

也许是因为我们的文字都是从左到右写的，所以才导致HTML规范中所有跟布局相关的设计都是倾向于左右布局。所以才导致左右居中非常容易，而上下竖向居中经常会出错。在《如何竖向居中》这篇文章里曾介绍过两种竖向居中的方法，但每种方法都有自己的局限。于是技术是第一生产力的真理又一次发挥作用。如果你使用支持CSS3的现代浏览器(谷歌浏览器，火狐，Safari或IE11)，只用三行CSS3代码，就会完美的让任何元素竖向居中。

我们使用的是CSS3中的transform: translateY属性。transform属性通常是用作旋转或放大缩小元素，但translateY功能却能够用来实现竖向居中。这里没有用到绝对定位，或设置行高。你无需知道父元素有多高。

CSS代码

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

这就是全部的代码。这种技术很类似绝对定位，但这里父元素无需设置高度或无需设置父元素的position属性。它能在所有情况下使用，甚至IE9！

如果想兼容老式的浏览器，你需要在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;
}

或者你也可以使用 Sass placeholder selector来减少CSS代码行数：

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

.element p {
  @extend %vertical-align;
}

一个小问题

有人指出，使用这种方法，元素在沿translateY移动时会损失“半个像素”，导致元素变得模糊。ok，对于这种问题，解决的方法是对其父元素使用preserve-3d属性。CSS代码如下：

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

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