css：垂直居中

{
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-20px;
    margin-left:-20px;
    height:40px;
    width:40px;
}

//借助calc()函数
{
    position:absolute;
    top:calc(50%-20px);
    left:calc(50%-20px);
    height:40px;
    width:40px;
}

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

{
    display:flex;
    justify-content:center;//使子元素水平居中
    align-items:center;//使子元素垂直居中
    height:40px;
}

{
    display: table-cell;
    vertical-align: middle;//使子元素垂直居中
    text-align: center;//使子元素水平居中
}