实现一个盒子水平居中方法

父box：300300 子box1：100100

1.padding

box{
    width:200px;
    height:200px;
    padding-top:100px;
    padding-left:100px;
}
box1{
    width:100px;
    height:100px;
}

2.margin

box{
    width:300px;
    height:300px;
    overflow:hidden;
}
box1{
    width:100px;
    height:100px;
    margin-top:100px;
    margin-left:100px;
}

3.absolute

box{
    width:300px;
    height:300px;
    position:absolute;
}
box1{
    width:100px;
    height:100px;
    position:absolute;
    top:50%;
    left:50%
    margin-top:-50px;
    margin-left:-50px;
}
box1{
    width:100px;
    height:100px;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
}

4.vertical

box{
    width:300px;
    height:300px;
    lie-height:300px;
    text-align:center;
}
box1{
    width:100px;
    height:100px;
    display:inline-block;
    vertical-align:center;
}

5.弹性盒子

box{
    width:300px;
    height:300px;
    display:flex;
}
box1{
    width:100px;
    height:100px;
    margin:auto;
}