CSS盒模型的几种居中方式

css实现盒子模型居中方式

1.绝对定位 margin负值

.parent{
    width:600px;
    height:600px;
    margin:auto;
    position: relative;
    background-color: #000;
 }
.child{
    width:200px;
    height:200px;
    background-color: red;
    position: absolute;
    top:50%;
    left:50%;
    margin:-100px 0 0 -100px;
}

2.绝对定位 四个方位为0

.parent{
    width:600px;
    height:600px;
    margin:auto;
    position: relative;
    background-color: #000;
}
.child{
    width:200px;
    height:200px;
    background-color: red;
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
}

3.绝对定位 translate

.parent{
    width:600px;
    height:600px;
    margin:auto;
    position: relative;
    background-color: #000;
}
.child{
    width:200px;
    height:200px;
    background-color: red;
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%)
}

4.margin属性居中

.parent{
    width:600px;
    height:600px;
    margin:auto;
        overflow: hidden;
    background-color: #000;
}
.child{
    width:200px;
    height:200px;
    background-color: red;
    margin: 150px auto 0;
}

5.table-cell

.parent{
    width:600px;
    height:600px;
        background-color: #000;
        display: table-cell;
        vertical-align: middle;
}
.child{
    width:200px;
    height:200px;
    background-color: red;
    margin: 0 auto;
}

6.flex 居中

.parent{
    width:600px;
    height:600px;
        display: flex;
        justify-content: center;
        align-items: center;
    background-color: #000;
    margin:0 auto;
}
.child{
    width:200px;
    height:200px;
    background-color: red;

}