toc

Intro

在transform: translateY的帮助下我们可以使用三行CSS代码让任何，甚至不知道高度的元素垂直居中。

CSS的transform属性常用来旋转和缩放元素，现在我们可以使用它的translateY函数垂直对齐元素。垂直居中通常的做法是使用绝对定位或者设置行高，但是这两种方案的弊端是要么需要你知道元素的高度，要么智能作用与单行文本（译注：inline或者inline-block元素）。

我们的代码如下

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

以上就是所有代码，它和据对定位的方案类似，但是不需要设定元素的高度，也不需要为其父元素设定position属性，它独立工作，甚至支持IE9！

为了让它用起来更简单，我们可以在包含浏览器前缀之后写入一个混合里面（mixins）：

@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减少代码量。

%vertical-align { 
	position: relative; 
    top: 50%; 
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    transform: translateY(-50%); 
} 
.element p { 
	@extend %vertical-align; 
}

Demo

———
翻译自：Vertical align anything with just 3 lines of CSS