死亡是一座永恒的灯塔

0%

css有哪些方式可以实现垂直居中？

发表于 更新于 分类于 ，
本文字数： 5.5k 阅读时长 ≈ 5 分钟

背景介绍

前端在设计一个版面时，通常都会用到水平，垂直居中，水平居中相对来说比较好处理，而垂直居中就稍微复杂点，但他们两个都是我们需要熟练掌握的知识点。

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>
<head>
    <meta charset="utf-8">
    <title>demo</title>
    <style>
        .father {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 200px;
            height: 200px;
            background: green;
        }
        .child {
            background: red;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="father">
        <div class="child">
            我要水平垂直居中
        </div>
    </div>
</div>
</body>
</html>

水平居中设置

行内元素

设置 text-align:center 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>demo</title>
</head>
<body>
<div class="txtCenter">我是行内元素，我要在父容器中水平居中显示。</div>
</body>
<style>
    .txtCenter{
        text-align:center;
    }
</style>
</html>

定宽块状元素

设置 左右 margin 值为 auto 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>demo</title>
</head>
<body>
<div>我是定宽块状元素，哈哈，我要水平居中显示。</div>
</body>
<style>
    div{
        border:1px solid red;  /*为了显示居中效果明显为 div 设置了边框*/
        width:200px;/*定宽*/
        margin:20px auto;/* margin-left 与margin-right 设置为 auto */
    }
</style>
</html>

不定宽块状元素

absolute和transform

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>demo</title>
    <style>
        .father {
            position: relative;
            width: 200px;
            height: 200px;
            background: green;
        }
        .child {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="father">
        <div class="child">
        </div>
    </div>
</div>
</body>
</html>

translate(x,y) 括号里填百分比数据的话，会以本身的长宽做参考，比如，本身的长为100px，高为50px. 那填(50%,50%)

就是向右，向下移动50px，添加负号就是向着相反的方向移动

元素外加入 table 标签

在元素外加入 table 标签（完整的，包括 table、tbody、tr、td），该元素写在 td 内，然后设置table 的 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
29
30
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>demo</title>
    <style>
        table {
            border: 1px solid;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div>
    <table>
        <tbody>
        <tr>
            <td>
                <div>
                    我要水平居中啊啊
                </div>
            </td>
        </tr>
        </tbody>
    </table>
</div>

</body>

</html>

把元素设置为行内元素

给该元素设置display:in-line方法 ,父元素设置text-align: center;

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>
<head>
    <meta charset="utf-8">
    <title>demo</title>
    <style>
        .father {
            text-align: center;
        }

        .son {
            display: inline;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="son">
        我要水平居中啊啊
    </div>
</div>
</body>
</html>

垂直居中设置

行内元素

父元素高度确定的单行文本,设置 height = line-height .

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>demo</title>
</head>
<body>
<div class="txtCenter">我是行内元素，我要在父容器中垂直居中显示。</div>
</body>
<style>
    .txtCenter{
        height: 50px;
        line-height: 50px;
        background-color: #33ccff;
    }
</style>
</html>

定高块级元素

父元素高度确定的定高块级元素

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>
<head>
    <meta charset="utf-8">
    <title>demo</title>
</head>
<body>
<div class="father">
    <div class="son">
        我是定高块状元素，哈哈，我要垂直居中显示。
    </div>
</div>

</body>
<style>
    .father{
        width: 500px;
        height: 500px;
        border: 1px solid red;/*防止外边距重叠*/
        background-color: #33ccff;
    }
    .son {
        border: 1px solid red; /*为了显示居中效果明显为 div 设置了边框*/
        width: 200px; /*定宽*/
        height: 200px;
        margin:  150px auto; /* margin-left 与margin-right 设置为 auto */
    }
</style>
</html>

父元素高度确定不定高元素

absolute和transform

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>demo</title>
    <style>
        .father {
            position: relative;
            width: 200px;
            height: 200px;
            background: green;
        }
        .child {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            background: red;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="father">
        <div class="child">
            我要垂直居中啊啊
        </div>
    </div>
</div>
</body>
</html>

元素外加入 table 标签

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>
<head>
    <meta charset="utf-8">
    <title>demo</title>
    <style>
        table {
            border: 1px solid;
            height: 300px;
        }
    </style>
</head>
<body>
<div>
    <table>
        <tbody>
        <tr>
            <td>
                <div>
                    我要垂直居中啊啊
                </div>
            </td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>

元素用表格渲染

父元素设置 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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>demo</title>
    <style>
        .parent{
            display:table; /*让元素以表格形式渲染*/
            border:1px solid red;
            background:red;
            height:200px;
        }
        .son{
            display:table-cell; /*让元素以表格的单元表格形式渲染*/
            vertical-align:middle;/*使用元素的垂直对齐*/
            background:yellow;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="parent">
        <div class="son">我要垂直居中啊啊</div>
    </div>
</div>
</body>
</html>

总结

Flex大法好！

拓展思考

5分钟学会 CSS Grid 布局

参考资料

如何实现元素的水平垂直居中

Flex 布局教程：语法篇

坚持技术分享，您的支持将鼓励我继续创作！