垂直水平居中的四种方式（已知元素高度or元素高度未知）

垂直水平居中的四种方式（已知元素高度or元素高度未知）

.parent{

height: 500px;

background: skyblue;

width: 500px;

}

.child{

width: 100px;

height: 100px;

background: #333;

}

已知元素高度

.parent{

position: relative;

}

.child{

position: absolute;

left:50%;

margin-left: -50px;

top:50%;

margin-top: -50px;

}

元素高度未知

①绝对定位+margin：auto

   .parent{
        position: relative;
    }
    .child{
        position: absolute;
        left: 0;
        right: 0;
        top:0;
        bottom: 0;
        margin: auto;
    }

②弹性盒子

   .parent{
        display: flex;
        align-items: center;
        justify-content: center;
    }

③p模拟表格盒子

   .parent{
        /*display: table;*/
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
    .child{
        display: inline-block;
    }

④CSS3实现

   .parent{
        position: relative;
    }
    .child{
        position: absolute;
        left: 50%;
        top:50%;
        transform: translate(-50%,-50%);//相对于该元素本身
    }