在前端开发过程中，盒子居中是常常用到的。其中 ，居中又可以分为水平居中和垂直居中。水平居中是比较容易的，直接设置元素的margin: 0 auto就可以实现。但是垂直居中相对来说是比较复杂一些的。下面我们一起来讨论一下实现垂直居中的方法。
首先，定义一个需要垂直居中的 div 元素，他的宽度和高度均为 300px，背景色为橙色。代码如下：
我们可以使用通过 margin-top 属性来设置，因为 div 的自身高度是 300，所以，需要设置他的 margin-top 值为-150。为什么是要设置成负数的呢？因为正数是向下偏移，我们是希望 div 向上偏移，所以应该是负数
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
26
27
28
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>index</title>
<style>
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
}
.content {
width: 300px;
height: 300px;
background: orange;
margin: 0 auto;
position: relative;
top: 50%;
margin-top: -150px;
}
</style>
</head>
<body>
<div class="content"></div>
</body>
</html>
除了可以使用 margin-top 把 div 往上偏移之外，CSS3 的transform属性也可以实现这个功能，通过设置 div 的transform: translateY(-50%)，意思是使得 div 向上平移（translate）自身高度的一半(50%)。如下：
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
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>index</title>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.content {
width: 300px;
height: 300px;
background: orange;
margin: 0 auto; /*水平居中*/
position: relative; /*脱离文档流*/
top: 50%; /*偏移*/
transform: translateY(-50%);
}
</style>
</head>
<body>
<div class="content"></div>
</body>
</html>
上面的两种方法，我们都是基于设置 div 的 top 值为 50%之后，再进行调整垂偏移量来实现居中的。如果使用 CSS3 的弹性布局（flex）的话，问题就会变得容易多了。使用 CSS3 的弹性布局很简单，只要设置父元素（这里是指 body）的 display 的值为 flex 即可。具体代码如下，对代码不做过多的解释，如果想了解弹性布局的可以看阮一峰老师的博客
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
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>index</title>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
display: flex;
align-items: center; /*定义body的元素垂直居中*/
justify-content: center; /*定义body的里的元素水平居中*/
}
.content {
width: 300px;
height: 300px;
background: orange;
}
</style>
</head>
<body>
<div class="content"></div>
</body>
</html>
