css实现元素居中的几种方法

.fatherBox{
    width:500px;
    height:500px;
    position:relative;
}

.sonBox{
　　width:200px;
　　height:200px;
　　position:absolute;
　　top:0;
　　botton:0;
　　left:0;
   right:0;
   margin:auto;  
  }

.fatherBox{
    width:500px;
    height:500px;
    position:relative;
 }
.sonBox{
　　width:200px;
　　height:200px;
　　position:absolute;
　　top:50%;
　　left:50%;
   margin-top:-100px;
   margin-left:-100px;
 }

.fatherBox{
    width:500px;
    height:500px;
    position:relative;
 }
.sonBox{
　　position:absolute;
　　top:50%;
　　left:50%;
   transform:translate(-50%,-50%)
 }

.fatherBox{
    width:500px;
    height:500px;
    display:flex;
    justify-content:center;
    align-items:center;
 }
.sonBox{
　　width:200px;
　　height:200px;
 }