水平居中
1.行内元素或行内块元素水平居中，即给其父元素添加text-align：center
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8 <style>
9 * {
10 padding: 0;
11 margin: 0;
12 }
13
14 .wrapper {
15 height: 400px;
16 background-color: pink;
17 text-align: center;
18 }
19 </style>
20 </head>
21
22 <body>
23
24 <div class="wrapper">
25 <span class="center">text-align：center</span>
26 </div>
27
28 </body>
29
30 </html>
2.块级元素水平居中可以用margin：0 auto
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8 <style>
9 * {
10 padding: 0;
11 margin: 0;
12 }
13
14 .wrapper {
15 height: 400px;
16 background-color: pink;
17 }
18
19 .center {
20 width: 100px;
21 height: 100px;
22 background-color: blueviolet;
23 margin: 0 auto;
24 text-align: center;
25 }
26 </style>
27 </head>
28
29 <body>
30
31 <div class="wrapper">
32 <div class="center">margin：0 auto</div>
33 </div>
34
35 </body>
36
37 </html>
3.绝对定位+左负外边距（但要提前知道该居中元素的尺寸，且不利于后续尺寸的修改）
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8 <style>
9 * {
10 padding: 0;
11 margin: 0;
12 }
13
14 .wrapper {
15 position: relative;
16 height: 400px;
17 background-color: pink;
18 }
19
20 .center {
21 position: absolute;
22 width: 100px;
23 height: 100px;
24 background-color: blueviolet;
25 left: 50%;
26 margin-left: -50px;
27 text-align: center;
28 }
29 </style>
30 </head>
31
32 <body>
33
34 <div class="wrapper">
35 <div class="center">绝对定位+左负外边距</div>
36 </div>
37
38 </body>
39
40 </html>
4.绝对定位+translate
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8 <style>
9 * {
10 padding: 0;
11 margin: 0;
12 }
13
14 .wrapper {
15 position: relative;
16 height: 400px;
17 background-color: pink;
18 }
19
20 .center {
21 position: absolute;
22 width: 100px;
23 height: 100px;
24 background-color: blueviolet;
25 left: 50%;
26 transform: translateX(-50%);
27 text-align: center;
28 }
29 </style>
30 </head>
31
32 <body>
33
34 <div class="wrapper">
35 <div class="center">绝对定位+translate</div>
36 </div>
37
38 </body>
39
40 </html>
5.弹性布局（给父元素设置display：flex，justify-content： center；其行内子元素也可以直接设置宽高了）
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8 <style>
9 * {
10 padding: 0;
11 margin: 0;
12 }
13
14 .wrapper {
15 display: flex;
16 height: 400px;
17 background-color: pink;
18 justify-content: center;
19 }
20
21 .center {
22 width: 100px;
23 height: 100px;
24 background-color: blueviolet;
25 }
26 </style>
27 </head>
28
29 <body>
30
31 <div class="wrapper">
32 <span class="center">弹性布局</span>
33 </div>
34
35 </body>
36
37 </html>
垂直居中
1.单行文字垂直居中，即让文字的行高等于盒子的高度
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8 <style>
9 * {
10 padding: 0;
11 margin: 0;
12 }
13
14 div {
15 width: 100px;
16 height: 100px;
17 background-color: coral;
18 line-height: 100px;
19 }
20 </style>
21 </head>
22
23 <body>
24
25 <div>单行文字</div>
26
27 </body>
28
29 </html>
2.绝对定位+上负外边距
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8 <style>
9 * {
10 padding: 0;
11 margin: 0;
12 }
13
14 .wrapper {
15 position: relative;
16 height: 400px;
17 background-color: pink;
18 }
19
20 .center {
21 position: absolute;
22 width: 100px;
23 height: 100px;
24 background-color: blueviolet;
25 top: 50%;
26 margin-top: -50px;
27 text-align: center;
28 }
29 </style>
30 </head>
31
32 <body>
33
34 <div class="wrapper">
35 <div class="center">绝对定位+上负外边距</div>
36 </div>
37
38 </body>
39
40 </html>
3.绝对定位+translate
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8 <style>
9 * {
10 padding: 0;
11 margin: 0;
12 }
13
14 .wrapper {
15 position: relative;
16 height: 400px;
17 background-color: pink;
18 }
19
20 .center {
21 position: absolute;
22 width: 100px;
23 height: 100px;
24 background-color: blueviolet;
25 top: 50%;
26 transform: translateY(-50%);
27 text-align: center;
28 }
29 </style>
30 </head>
31
32 <body>
33
34 <div class="wrapper">
35 <div class="center">绝对定位+上负外边距</div>
36 </div>
37
38 </body>
39
40 </html>
4.弹性布局（align-items：center）
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8 <style>
9 * {
10 padding: 0;
11 margin: 0;
12 }
13
14 .wrapper {
15 display: flex;
16 height: 400px;
17 background-color: pink;
18 align-items: center;
19 }
20
21 .center {
22 width: 100px;
23 height: 100px;
24 background-color: blueviolet;
25 }
26 </style>
27 </head>
28
29 <body>
30
31 <div class="wrapper">
32 <span class="center">弹性布局</span>
33 </div>
34
35 </body>
36
37 </html>
5.弹性布局（主轴方向从上到下）
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8 <style>
9 * {
10 padding: 0;
11 margin: 0;
12 }
13
14 .wrapper {
15 display: flex;
16 height: 400px;
17 background-color: pink;
18 flex-direction: column;
19 justify-content: center;
20 }
21
22 .center {
23 width: 100px;
24 height: 100px;
25 background-color: blueviolet;
26 }
27 </style>
28 </head>
29
30 <body>
31
32 <div class="wrapper">
33 <span class="center">弹性布局（主轴方向从上到下）</span>
34 </div>
35
36 </body>
37
38 </html>
6.绝对定位结合margin：auto
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8 <style>
9 * {
10 padding: 0;
11 margin: 0;
12 }
13
14 .wrapper {
15 position: relative;
16 height: 400px;
17 background-color: pink;
18 }
19
20 .center {
21 position: absolute;
22 width: 100px;
23 height: 100px;
24 background-color: blueviolet;
25 top: 0;
26 bottom: 0;
27 margin: auto;
28 }
29 </style>
30 </head>
31
32 <body>
33
34 <div class="wrapper">
35 <div class="center">绝对定位结合margin:auto</div>
36 </div>
37
38 </body>
39
40 </html>
7.display和vertical-align
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8 <style>
9 * {
10 padding: 0;
11 margin: 0;
12 }
13
14 .wrapper {
15 display: table;
16 width: 400px;
17 height: 400px;
18 background-color: pink;
19 }
20
21 .center {
22 display: table-cell;
23 vertical-align: middle;
24 }
25 </style>
26 </head>
27
28 <body>
29
30 <div class="wrapper">
31 <span class="center">display和vertical-align</span>
32 </div>
33
34 </body>
35
36 </html>