很楠不爱3

这个屌丝很懒，什么也没留下！

热门标签

[前端知识点]元素水平垂直居中_子元素垂直居中子元素定位都设置为0什么意思

作者：很楠不爱3 | 2024-06-04 12:41:12

踩

子元素垂直居中子元素定位都设置为0什么意思

[前端知识点]元素水平垂直居中

前言

前言

前端面试常考，通过css实现父元素中子元素水平垂直居中
接下来介绍九种布局方式

初始html模板如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex实现元素水平垂直居中</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #wrap {
           
        }
        #wrap .box {
        }
    </style>
</head>
<body>

<div id="wrap" style="width: 500px;height: 500px;background: gray">
    <div class="box" style="width: 200px;height: 200px;background: pink;"></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

初始效果如下
垂直水平居中
期望实现以下效果
子元素水平垂直居中

一、子元素相对于父元素绝对定位(偏移量都为0)，子元素设置margin:auto

#wrap {
   position: relative;
}
#wrap .box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
1
2
3
4
5
6
7
8
9
10
11

二、子元素相对于父元素绝对定位，并配合使用负值的 margin

最常见的方法，这种方法只能在子元素宽高已知的情况下使用。

#wrap {
   position: relative;
}
#wrap .box {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
}
1
2
3
4
5
6
7
8
9
10

三、子元素相对父元素绝对定位，并使用 calc() 计算属性

与上一方法相同，只是用计算属性替代了偏移量和 margin

#wrap {
   position: relative;
}
#wrap .box {
    position: absolute;
    top: calc(50% - 100px);
    left: calc(50% - 100px);
}
1
2
3
4
5
6
7
8

四、子元素相对父元素绝对定位，并使用 transform 属性

与二、三方法相似，不过使用 translate 对子元素的宽高没有要求，在未知宽高的情况下依然适用。

#wrap {
   position: relative;
}
#wrap .box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
1
2
3
4
5
6
7
8
9

五、父元素flex; 子元素 margin:auto;

最简单的方式，子元素宽高已知未知的情况都适用。

#wrap {
    display: flex;
}
#wrap .box {
    margin: auto;
}
1
2
3
4
5
6

flex其他方式可参考flex教程

六、父元素通过flex设置内容的水平和垂直居中（新版本）

可能存在兼容问题

#wrap {
    display: flex;
    justify-content: center;
    align-items: center;
}
#wrap .box {
}
1
2
3
4
5
6
7

七、父元素通过flex设置内容的水平和垂直居中（老版本）

#wrap {
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
}
#wrap .box {
}
1
2
3
4
5
6
7

八、父元素table-cell 和 vertical-align：middle; 子元素margin: auto

低版本IE会有问题

#wrap {
    display: table-cell;
    vertical-align: middle;
}
#wrap .box {
    margin: auto;
}
1
2
3
4
5
6
7

九、父元素table-cell 及内容的水平和垂直居中，子元素设置为行内块