如何实现一个盒子水平垂直居中

一，利用定位法（推荐）

.parent{
   width:500px
   heigth:500px
   border:1px soild #000
   position:relative
}
.child{
    width:100px
    heigth:100px
    border:1px soild #000
    position:absolute
    top:50%
    left:50%
    margin-top:-50px
    margin-left:-50px
}

二，利用margin:auto

.parent{
   width:500px
   heigth:500px
   border:1px soild #000
   position:relative
}
.child{
    width:100px
    heigth:100px
    border:1px soild #000
    position:absolute
    magin:auto
    top:0
    left:0
    buttom:0
    right:0
    }

三，利用transform

.parent{
   width:500px
   heigth:500px
   border:1px soild #000
   position:relative
}
.child{
    width:100px
    heigth:100px
    border:1px soild #000
    position:absolute
    top:50%
    left:50%
    transform:translate(-50%,-50%)
    }

四，利用display:flex;设置水平垂直都居中

.parent{
   width:500px
   heigth:500px
   border:1px soild #000
   display:flex
   justify-content:center
   align-items:center
}
.child{
    width:100px
    heigth:100px
    border:1px soild #000
    }