CSS基础知识（五）：水平居中和垂直居中_css水平居中和垂直居中

作者：很楠不爱3 | 2024-06-11 10:13:00

踩

css水平居中和垂直居中

文章目录

一、居中
二、水平居中
三、垂直居中

一、居中

行内元素：

水平居中：text-align：center
垂直居中：单行——行高等于盒子高度
垂直居中：多行——display:table-cell、vertical-align: middle

块级元素：

水平居中：margin：0 auto、absolute+left50%+margin-left/translateX(-50%)、
flex+ justify-content: center
垂直居中：absolute+top50%+margin-top/translateY(-50%)、
flex+ align-items: center

水平垂直居中：同时使用水平居中和垂直居中

二、水平居中

1. 行内元素水平居中

行内元素水平居中：text-align：center

<style>
	.father {
    	width: 400px;
    	height: 200px;
    	background-color: pink;
    	/* 主要代码：text-align: center; */
    	text-align: center;
    }
    .son {
    }
</style>

<body>
    <div class="father">
        <span class="son">我是行内元素，我想水平居中</span>
    </div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

在这里插入图片描述

2. 块级元素水平居中

2.1 使用margin: 0 auto

<head>
    <style>
        .father {
            width: 400px;
            height: 200px;
            background-color: pink;
        }
        .son {
            width: 200px;
            height: 100px;
            background-color: skyblue;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">我是块级元素，我想水平居中。</div>
    </div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

在这里插入图片描述

2.2 使用position

<head>
    <style>
        .father {
            width: 400px;
            height: 200px;
            background-color: pink;
            position: relative;
        }
        .son {
            width: 200px;
            height: 100px;
            background-color: skyblue;
            position: absolute;
            left: 50%;
            /* 如果元素没有设置宽度，不能使用margin-left，可以使用transform: translateX(-50%); 效果相同*/
            margin-left: -100px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">我是块级元素，我想水平居中。</div>
    </div>
</body>
</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

在这里插入图片描述

2.3 使用flex

<head>
    <style>
        .father {
            width: 400px;
            height: 200px;
            background-color: pink;
            display: flex;
            justify-content: center;
        }
        .son {
            width: 200px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">我是块级元素，我想水平居中。</div>
    </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

在这里插入图片描述

三、垂直居中

1. 行内元素

1.1 单行行内元素垂直居中

单行行内元素垂直居中：行高等于盒子高度

<head>
    <style>
        .father {
            width: 400px;
            height: 200px;
            /* 行高等于盒子高度：line-height: 200px; */
            line-height: 200px;
            background-color: pink;
        }
        .son {

        }
    </style>
</head>
<body>
    <div class="father">
        <span class="son">我是行内元素，我想垂直居中</span>
    </div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

在这里插入图片描述

1.2 多行行内元素垂直居中

多行行内元素垂直居中：display:table-cell、vertical-align: middle
单行行内元素垂直居中方式不适合多行文本，会变成下图：

<head>
    <style>
        .father {
            width: 400px;
            height: 200px;
            /* 主要代码：display: table-cell; vertical-align: middle;*/
            display: table-cell;
            background-color: pink;
            vertical-align: middle;
        }
        .son {

        }
    </style>
</head>
<body>
    <div class="father">
        <span class="son">我是行内元素，我想垂直居中。我是行内元素，我想垂直居中。我是行内元素，我想垂直居中。我是行内元素，我想垂直居中。我是行内元素，我想垂直居中。我是行内元素，我想垂直居中。</span>
    </div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

在这里插入图片描述

2. 块级元素

2.1 使用position

<head>
    <style>
        .father {
            width: 400px;
            height: 200px;
            background-color: pink;
            position: relative;
        }
        .son {
            width: 200px;
            height: 100px;
            background-color: skyblue;
            position: absolute;
            top: 50%;
            /* 如果元素没有设置高度，不能使用margin-top，可以使用transform: translateY(-50%); 效果相同*/
            margin-top: -50px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">我是块级元素，我想垂直居中。</div>
    </div>
</body>
</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

在这里插入图片描述

2.2 使用flex

<head>
    <style>
        .father {
            width: 400px;
            height: 200px;
            background-color: pink;
            display: flex;
            align-items: center;
        }
        .son {
            width: 200px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">我是块级元素，我想垂直居中。</div>
    </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/702735