CSS

[CSS布局基础]居中布局的实现方式总结

【原创】码路工人 Coder-Power

大家好，这里是码路工人有力量，我是码路工人，你们是力量。

github-pages
博客园cnblogs

做Web开发少不了做页面布局。码路工人给大家总结一下水平居中，垂直居中，水平垂直居中的布局实现。

1.水平居中

通过以下四种方式，将实现下图中的效果

Horizontal-Center

1.1 利用父级 text-align: center; 加子级 display: inline-block;（只要是inline-的都可以）实现子元素水平居中

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
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>layout-h-center-1.html</title>
    <style>
        /* 为了不影响理解，对于布局非关键的样式单独放在这里 */
        body {
            background-color: lightgray;
        }
        .parent {
            background-color: lightblue;
            width: 500px;
            height:400px;
        }
        .child {
            background-color: lightyellow;
            width: 300px;
            height:200px;
        }

        /* 布局关键样式在这里 */
        .parent {
            text-align: center;
        }
        .child {
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

1.2 利用弹性布局 flex，将父级设为 display: flex; 加 justify-content: 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
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>layout-h-center-2.html</title>
    <style>
        /* 为了不影响理解，对于布局非关键的样式单独放在这里 */
        body {
            background-color: lightgray;
        }
        .parent {
            background-color: lightblue;
            width: 500px;
            height:400px;
        }
        .child {
            background-color: lightyellow;
            width: 300px;
            height:200px;
        }

        /* 布局关键样式在这里 */
        .parent {
            display: flex;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

1.3 利用相对布局加平移，将子级设为 position: relative; 加 left: 50%; 加 transform: translateX(-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
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>layout-h-center-3.html</title>
    <style>
        /* 为了不影响理解，对于布局非关键的样式单独放在这里 */
        body {
            background-color: lightgray;
        }
        .parent {
            background-color: lightblue;
            width: 500px;
            height:400px;
        }
        .child {
            background-color: lightyellow;
            width: 300px;
            height:200px;
        }

        /* 布局关键样式在这里 */
        .child {
            position: relative;
            left: 50%;
            transform: translateX(-50%);
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

1.4 将子元素左右间距设为 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
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>layout-h-center-4.html</title>
    <style>
        /* 为了不影响理解，对于布局非关键的样式单独放在这里 */
        body {
            background-color: lightgray;
        }
        .parent {
            background-color: lightblue;
            width: 500px;
            height:400px;
        }
        .child {
            background-color: lightyellow;
            width: 300px;
            height:200px;
        }

        /* 布局关键样式在这里 */
        .child {
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

2. 垂直居中

通过以下四种方式，将实现下图中的效果

Vertical-Center

2.1 利用 table-cell ，将父级设为 display: table-cell; 加 vertical-align: middle; 实现子元素垂直居中

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
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>layout-v-center-1.html</title>
    <style>
        /* 为了不影响理解，对于布局非关键的样式单独放在这里 */
        body {
            background-color: lightgray;
        }
        .parent {
            background-color: lightblue;
            width: 500px;
            height:400px;
        }
        .child {
            background-color: lightyellow;
            width: 300px;
            height:200px;
        }

        /* 布局关键样式在这里 */
        .parent {
            display: table-cell;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

2.2 利用弹性布局 flex，将父级设为 display: flex; 加 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
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>layout-v-center-2.html</title>
    <style>
        /* 为了不影响理解，对于布局非关键的样式单独放在这里 */
        body {
            background-color: lightgray;
        }
        .parent {
            background-color: lightblue;
            width: 500px;
            height:400px;
        }
        .child {
            background-color: lightyellow;
            width: 300px;
            height:200px;
        }

        /* 布局关键样式在这里 */
        .parent {
            display: flex;
            align-items: center;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

2.3 利用相对布局加平移，将子级设为 position: relative; 加 top: 50%; 加 transform: translateY(-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
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>layout-v-center-3.html</title>
    <style>
        /* 为了不影响理解，对于布局非关键的样式单独放在这里 */
        body {
            background-color: lightgray;
        }
        .parent {
            background-color: lightblue;
            width: 500px;
            height:400px;
        }
        .child {
            background-color: lightyellow;
            width: 300px;
            height:200px;
        }

        /* 布局关键样式在这里 */
        .child {
            position: relative;
            top: 50%;
            transform: translateY(-50%);
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

2.4 通过绝对布局加 margin ，将父级设为 position: relative; ，加子元素设上下左右均为 0 并且 margin: auto 0; 实现子元素垂直居中

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>layout-v-center-4.html</title>
    <style>
        /* 为了不影响理解，对于布局非关键的样式单独放在这里 */
        body {
            background-color: lightgray;
        }
        .parent {
            background-color: lightblue;
            width: 500px;
            height:400px;
        }
        .child {
            background-color: lightyellow;
            width: 300px;
            height:200px;
        }

        /* 布局关键样式在这里 */
        .parent {
            position: relative;
        }
        .child {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto 0;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

3. 水平垂直居中

通过以下四种方式，将实现下图中的效果

Both-Center

上面分别列举了水平居中与垂直居中的4种实现方式，那么要实现水平+垂直的居中，就很容易了，把上面的组合起来就可以。为了统一好看，我们还是列举4个代码样例片段吧。

3.1 与前文的第一种对应

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
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>layout-h-center-1.html</title>
    <style>
        /* 为了不影响理解，对于布局非关键的样式单独放在这里 */
        body {
            background-color: lightgray;
        }
        .parent {
            background-color: lightblue;
            width: 500px;
            height:400px;
        }
        .child {
            background-color: lightyellow;
            width: 300px;
            height:200px;
        }

        /* 布局关键样式在这里 */
        .parent {
            text-align: center;
            
            display: table-cell;
            vertical-align: middle;
        }
        .child {
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

3.2 与前文的第二种对应

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
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>layout-h-center-1.html</title>
    <style>
        /* 为了不影响理解，对于布局非关键的样式单独放在这里 */
        body {
            background-color: lightgray;
        }
        .parent {
            background-color: lightblue;
            width: 500px;
            height:400px;
        }
        .child {
            background-color: lightyellow;
            width: 300px;
            height:200px;
        }

        /* 布局关键样式在这里 */
        .parent {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

3.3 与前文的第三种对应

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
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>layout-h-center-1.html</title>
    <style>
        /* 为了不影响理解，对于布局非关键的样式单独放在这里 */
        body {
            background-color: lightgray;
        }
        .parent {
            background-color: lightblue;
            width: 500px;
            height:400px;
        }
        .child {
            background-color: lightyellow;
            width: 300px;
            height:200px;
        }

        /* 布局关键样式在这里 */
        .child {
            position: relative;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%); 
            /* translateX 与 translateY 要写在一个 transform 里 */
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

3.4 与前文的第四种对应

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>layout-h-center-1.html</title>
    <style>
        /* 为了不影响理解，对于布局非关键的样式单独放在这里 */
        body {
            background-color: lightgray;
        }
        .parent {
            background-color: lightblue;
            width: 500px;
            height:400px;
        }
        .child {
            background-color: lightyellow;
            width: 300px;
            height:200px;
        }

        /* 布局关键样式在这里 */
        .parent {
            position: relative;
        }
        .child {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

列举了这么多，大家都掌握了吗？

其实也不必全部掌握，上面的布局实现，以 flex 实现方式作为重点。
这里主要总结几种方式，没有过多纠结其中细节。

码路工人认为，将来的话 flex 与 grid 布局方式会成为主流。这两个不是哪个好的问题，而是相互补充，flex 简单说就是一行一列（实际上里面也有很多），grid 的话就理解为类似 Bootstrap 的栅格吧，多行多列。

建议布局方面的话，学习 flex 跟 grid 。码路工人作为转前端的新手，CSS 知识浅薄，就暂时不献丑了。以后，也可以做个 CSS3基础 的学习系列。不过暂时呢，还是要把我们的 ES6基础系列 写完。（感觉有太多事情要做有木有？。。）

以上。

希望对你能有帮助，下期再见。

欢迎关注分享，一起学习提高吧。
QRCode/微信订阅号二维码
CoderPowerQRCode