已知宽高和未知宽高的div块的水平垂直居中

时间:2021-11-19 02:45:12
//已知宽高的情况
.div1_container{
    border:1px solid #00ee00;
    height:300px;
    position:relative;
}
.div1_center{
    position:absolute;
    top:50%;
    left:50%;
    margin:-100px 0 0 -100px;
    width:200px;
    height:200px;
    border:1px solid red;
}
//未知宽高的情况
.div2_container{
    text-align:center;
    height:400px;
    border:1px solid #0000ed;
}
.div2_container:before{
    content:'';
    height:100%;
    display:inline-block;
    vertical-align:middle;
}
.div2_center{
    display:inline-block;
    vertical-align:center;
    border:1px solid red;
}