Transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。还可以用来对元素进行居中布局。
很早以前了解过当元素是固定宽度和高度的时候，水平垂直高居中的方法可以设置 margin 的负值来使其居中，这个负值是元素的宽和高的一半，比如宽高是 100px，那么就用 margin-left: -50px；margin-top: -50px 这样的写法。但如果这个元素的宽高是用百分比表示呢？
如果使用百分比来设置宽高的话，以前哪个负值方法已经用不上了，这个我们发现在一个小的窍门，就是使用 CSS3 中的 transform 的 translate 转换属性。下面来看代码实例：
HTML代码：
<div class="center">您可以尝试改变浏览器大小，这个元素依然是水平垂直居中的哦！</div>
CSS代码：
.center {
position: absolute;
top: 50%;
left: 50%;
width: 50%;
height: 30%;
padding: 20px;
text-align: center;
background: #393;
color: #fff;
webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}