---
title: "三行CSS代码让任何元素垂直居中"
description: "在`transform: translateY`的帮助下我们可以使用三行CSS代码让任何，甚至不知道高度的元素垂直居中。"
url: "https://hicc.pro/p/blog/vertical-align-anything-with-just-3-lines-of-css"
author: "tyler wang"
published: "2014-01-20T09:16:42.000Z"
updated: "2015-01-11T04:12:56.000Z"
category: "blog"
tags:
  - "垂直居中"
lang: "zh-CN"
site: "Hipo日志"
---

# 三行CSS代码让任何元素垂直居中

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

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

我们的代码如下

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

以上就是所有代码，它和据对定位的方案类似，但是不需要设定元素的高度，也不需要为其父元素设定`position`属性，它独立工作，甚至支持[IE9](http://caniuse.com/#feat=transforms2d)！

为了让它用起来更简单，我们可以在包含浏览器前缀之后写入一个混合里面（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](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#placeholder_selectors_)减少代码量。

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

[Demo](http://codepen.io/)

———  
 翻译自：[Vertical align anything with just 3 lines of CSS](http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css)

---

原文 / Source: <https://hicc.pro/p/blog/vertical-align-anything-with-just-3-lines-of-css>