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

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;
}

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

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

方式一：绝对定位+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;
}

方式二：绝对定位+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;
}

方式三：绝对定位+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%);
}

方式四：弹性盒子：

设置父元素为弹性盒子，并且设置主轴对齐方式（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;
}