实现元素垂直水平居中

一、已知宽高

#container{
    position:relative;
}

#center{
    width:100px;
    height:100px;
    position:absolute;
    top:50%;
    left:50%;
    margin:-50px 0 0 -50px;
}

二、不知宽高

transform

#container{
    position:relative;
}

#center{
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

position

#container{
    position:relative;
}

#center{
    position:absolute;
    margin:auto;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

flex

#container{
    display:flex;
    justify-content:center;
    align-items: center;
}