CSS 设置元素水平垂直居中的几种方式
海边的小溪鱼 2022-07-14 CSS
如何让一个块级的子元素在父容器里水平垂直居中？有好几种写法
# 方式一：绝对定位 + margin
- 需要指定子元素的宽高（不推荐）
<html>
<body>
<div class="father">
<div class="son">Son</div>
</div>
</body>
<style>
.father {
width: 200px;
height: 200px;
background-color: red;
/* 父元素：绝对定位 */
position: relative;
}
.son {
width: 100px;
height: 100px;
background-color: green;
/* 子元素：相对定位 + margin */
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
</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
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
# 方式二：绝对定位 + translate
- 可以不指定子元素的宽高（推荐）
<html>
<body>
<div class="father">
<div class="son">Son</div>
</div>
</body>
<style>
.father {
width: 200px;
height: 200px;
background-color: red;
/* 父元素：绝对定位 */
position: relative;
}
.son {
background-color: green;
/* 子元素：相对定位 + translate */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# 方式三：绝对定位 + top、left...四个属性值为0
- 作用1：可以让指定宽高的盒子水平垂直居中
- 作用2：让没有指定宽高的子元素填满父元素
<html>
<body>
<div class="father">
<div class="son">Son</div>
</div>
</body>
<style>
.father {
width: 200px;
height: 200px;
background-color: red;
/* 父元素：绝对定位 */
position: relative;
}
.son {
width: 100px;
height: 100px;
background-color: green;
/* 子元素：相对定位 + 四个属性值为0 */
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
</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
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
# 方式四：Flex 布局
- 注意：如果父容器里有多个子元素的话，都会垂直居中
<html>
<body>
<div class="father">
<div class="son">Son</div>
</div>
</body>
<style>
.father {
width: 200px;
height: 200px;
background-color: red;
display: flex;
justify-content: center;
align-items: center;
}
.son {
background-color: green;
}
</style>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 方式五：flex 布局 + margin: auto
- 让指定的子元素在剩余空间里水平垂直居中（推荐）
<html>
<body>
<div class="father">
<div class="son">Son</div>
</div>
</body>
<style>
.father {
width: 200px;
height: 200px;
background-color: red;
display: flex;
}
.son {
background-color: green;
margin: auto;
}
</style>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 方式六：table-cell 布局 + margin: 0 auto
- 注意：子元素不指定宽度时,默认是100%
- 注意：此方法会让父级盒子margin: 0 auto;（水平居中）失效
<html>
<body>
<div class="father">
<div class="son">Son</div>
</div>
</body>
<style>
.father {
width: 200px;
height: 200px;
background-color: red;
display: table-cell;
vertical-align: middle;
}
.son {
width: 100px;
height: 100px;
background-color: green;
margin: 0 auto;
}
</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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 其他方式
除了上述的方法外，还有其他的方法：
- 方法1：【父盒子】添加overflow:hidden;（或者给父盒子添加内边距或边框）再给【子盒子】添加margin值。 此方法需要计算margin外边距值。
- 方法2：【子盒子】添加浮动（float）和外边距（margin） 此方法需要计算margin外边距值，会影响其他标准流盒子。:::