要实现一个页面效果其实可以用很多方法来实现，下面从使用场景的角度来列出常用方法。
1 水平居中
1.1 容器居中（margin）
容器自身居中，给容器使用 margin:0 auto 就可以达到效果。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.container {
background-color: yellow;
margin: 0 auto;
width: calc(100% - 4rem);
}
</style>
</head>
<body>
<div class="container">
<span>hello</span>
</div>
</body>
</html>
|
1.2 容器内子元素(flex)
给 flex 布局的成员设置 margin:auto 时 ，自动的外边距会占据全部的可用空间，从而达到居中的效果。
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">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.containerCenter {
height: 500px;
display: flex;
background-color: greenyellow;
}
.center {
background-color: hotpink;
margin: auto;
}
</style>
</head>
<body>
<div class="containerCenter">
<div class="center">center</div>
</div>
</body>
</html>
|
1.3 文本居中(text-align)
让文本居中，可以在块级容器上使用 text-aligin:center 来达到效果。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="container">
<div style="text-align: center;">
<span>给块状的父元素设置 text-align: center</span>
</div>
<div style="text-align: center;">
给块状的父元素设置 text-align: center
</div>
</div>
</body>
</html>
|
2 垂直居中
2.1 遮罩（position）
这个方法可以适用于遮罩场景。使用 position，将其值配置为 fixed 、 relative 或 absolute 使得元素位置可移动。再通过 top left 等属性调整元素位置。下面例子中，当配置值为 relative 时，需要将html body 的高度都设置为 100% 才能达到让 .center 元素垂直居中的效果，所以下面使用 absolute 来举例。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.center {
width: 200px;
height: 200px;
background-color: red;
margin: 0 auto;
position: absolute;
top: calc(50% - (200px / 2));
left: calc(50% - (200px / 2));
}
</style>
</head>
<body>
<div class="center"></div>
</body>
</html>
|
2.2 文字居中（line-height）
当希望使文字在垂直方向居中时，可以将 line-height 和 height 设置成一样，来达到效果。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.textCenter {
height: 200px;
width: 200px;
text-align: center;
line-height: 200px;
background-color: violet;
}
</style>
</head>
<body>
<div class="textCenter">我是文字我想居中</div>
</body>
</html>
|
3 flex
把 flex 单独提出来，是因为 flex 设置容器内元素的垂直和水平居中都非常方便，并且无论其子元素是块状还是行内元素。
主轴（默认为水平方向）居中使用justify-content:center。
副轴（默认为垂直方向）居中使用align-items: center。
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.containerCenter {
height: 500px;
display: flex;
background-color: greenyellow;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="containerCenter">
hello
</div>
</body>
</html>
|