水平垂直居中

1 , 利用表格的特性

<!--父级-->
parent{
    width:500px ; 
    height:500px;
    display:table-cell ; 
    text-align:center ; 
    vertical-align:middle ; 
}
<!--子级-->
child{
    display:inline-block ; 
}
2 , 利用绝对定位(es6)

<!--父级-->
parend{
    position:relative ; 
}
<!--子级-->
child{
    position:absoult ; 
    width:100px;
    height:100px;
    left:calc(50% - 50px) ; 
    top:calc(50% - 50px) ; 
}
3 , 利用margin来直接填充

<!--父级-->
parent{
    position:relative ; 
}
<!--子级-->
child{
    width: 100px;
    height: 100px;
    background-color: red ; 
    position: absolute;
    left: 50% ; 
    top: 50% ; 
    margin-left: -50px;
    margin-top: -50px;
}
4 , 利用css3的transform

<!--父级-->
parent{
    position:relative ; 
}
<!--子级-->
child{
    width: 100px;
    height: 100px;
    background-color: red ; 
    position: absolute;
    left: 50% ; 
    top: 50% ; 
    transform: translate(-50% , -50%) ; 
}
5 , 利用margin和绝对定位

<!--父级-->
parent{
    position:relative ; 
}
<!--子级-->
child{
    width: 100px;
    height: 100px;
    background-color: red ; 
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto ;  
}
6 , 利用flex属性

<!--父级-->
parent{
    display:flex ; 
}
<!--子级-->
child{
    margin:auto ; 
}