css参考---实现元素水平垂直居中

一、总结

一句话总结：

方式一：绝对定位+margin: auto;：子元素绝对定位，并且偏移全为0，margin设置为auto
方式二：绝对定位+margin自身负偏移：子元素绝对定位且左（left）上（top）偏移50%，再margin负偏移左（left）上（top）自身的一半
方式三：绝对定位+transform:translate 平移方式：子元素绝对定位且左（left）上（top）偏移50%，使用transform:translate实现自身左上偏移50%
方式四：弹性盒子：设置父元素为弹性盒子，并且设置主轴对齐方式（justify-content）和侧轴对齐方式（align-items）都为center

 

 

1、实现元素水平垂直居中 方式一：绝对定位+margin: auto;？

子元素绝对定位，并且偏移全为0，margin设置为auto



.parent_box{
    width: 400px;
    height: 400px;
    background-color: lightseagreen;
    position: relative;
}
.child_box{
    width: 200px;
    height: 200px;
    background-color: red;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}


 

 

 

2、实现元素水平垂直居中 方式二：绝对定位+margin自身负偏移？

子元素绝对定位且左（left）上（top）偏移50%，再margin负偏移左（left）上（top）自身的一半



.parent_box{
    width: 400px;
    height: 400px;
    background-color: lightseagreen;
    position: relative;
}
.child_box{
    width: 200px;
    height: 200px;
    background-color: red;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -100px;
    margin-top: -100px;
}


 

 

 

3、实现元素水平垂直居中 方式三：绝对定位+transform:translate 平移方式？

子元素绝对定位且左（left）上（top）偏移50%，使用transform:translate实现自身左上偏移50%



.parent_box{
    width: 400px;
    height: 400px;
    background-color: lightseagreen;
    position: relative;
}
.child_box{
    width: 200px;
    height: 200px;
    background-color: red;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}


 

 

 

4、实现元素水平垂直居中 方式四：弹性盒子？

设置父元素为弹性盒子，并且设置主轴对齐方式（justify-content）和侧轴对齐方式（align-items）都为center



.parent_box{
    width: 400px;
    height: 400px;
    background-color: lightseagreen;
    display: flex;
    justify-content: center;
    align-items: center;
}
.child_box{
    width: 200px;
    height: 200px;
    background-color: red;
}


 

 

 

 

二、实现元素水平垂直居中

博客对应课程的视频位置：

 

css参考---实现元素水平垂直居中_人工智能

 

 

 

方式一：绝对定位+margin: auto;：

子元素绝对定位，并且偏移全为0，margin设置为auto



1 .parent_box{
 2     width: 400px;
 3     height: 400px;
 4     background-color: lightseagreen;
 5     position: relative;
 6 }
 7 .child_box{
 8     width: 200px;
 9     height: 200px;
10     background-color: red;
11     position: absolute;
12     left: 0;
13     right: 0;
14     top: 0;
15     bottom: 0;
16     margin: auto;
17 }


 

 

方式二：绝对定位+margin自身负偏移：

子元素绝对定位且左（left）上（top）偏移50%，再margin自身负偏移左（left）上（top）自身的一半



1 .parent_box{
 2     width: 400px;
 3     height: 400px;
 4     background-color: lightseagreen;
 5     position: relative;
 6 }
 7 .child_box{
 8     width: 200px;
 9     height: 200px;
10     background-color: red;
11     position: absolute;
12     left: 50%;
13     top: 50%;
14     margin-left: -100px;
15     margin-top: -100px;
16 }


 

 

 

方式三：绝对定位+transform:translate 平移方式：

子元素绝对定位且左（left）上（top）偏移50%，使用transform:translate实现自身左上偏移50%



1 .parent_box{
 2     width: 400px;
 3     height: 400px;
 4     background-color: lightseagreen;
 5     position: relative;
 6 }
 7 .child_box{
 8     width: 200px;
 9     height: 200px;
10     background-color: red;
11     position: absolute;
12     left: 50%;
13     top: 50%;
14     transform: translate(-50%,-50%);
15 }


 

 

 

方式四：弹性盒子：

设置父元素为弹性盒子，并且设置主轴对齐方式（justify-content）和侧轴对齐方式（align-items）都为center



1 .parent_box{
 2     width: 400px;
 3     height: 400px;
 4     background-color: lightseagreen;
 5     display: flex;
 6     justify-content: center;
 7     align-items: center;
 8 }
 9 .child_box{
10     width: 200px;
11     height: 200px;
12     background-color: red;
13 }