文章目录

css垂直居中有很多种写法,但最常见的是我们不知道容器的准确高度,而要让子元素垂直居中,这篇文章介绍一种最简单的写法,仅用3行代码让你的元素垂直居中。
css的transform常用来旋转或缩放元素,但它的translateY我们可以用来垂直居中元素。写法如下:

1
2
3
4
5
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}

这就是所需要的代码,我们不需要设置父元素的高度或位置,但需要注意的是transform在IE9及以上才会得到支持。
为了使它成为我们项目中更加通用的功能,我们可以设置一个Mixin:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/* Mixin */
@mixin vertical-align {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.element p {
@include vertical-align;
}
/* Placeholder selector */
%vertical-align {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.element p {
@extend %vertical-align;
}

如果你的项目中使用了autoprefixer,则不需要写任何浏览器前缀。
如果使用这种方法出现垂直居中元素模糊的情况,可以用如下方法解决:

1
2
3
4
5
6
7
8
9
10
11
.parent-element {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}

文章目录