水平垂直居中

1

1.
 .father{
     width:200px;
     height:200px;
     position: relative;
 }
 .child {
     width:100px;
     height:100px;
     position: absolute;
     top: 0;
     left:0;
     right:0;
     bottom: 0;
     margin-left: auto;
 }
2. .child {
      width:100px;
     height:100px;
      position: absolute;
      left: 50%;
      top:50%;
      margin-left: -100px;
      margin-top: -100px;
}
3. .child {
   width:100px;
     height:100px;
      position: absolute;
      left: 50%;
      top:50%;
      transform: translate(-50%, -50%)
}

4.  
 .father{
     width:200px;
     height:200px;
     display: flex;
     /*主轴上水平居中*/
     justify-content: center;
    /*副轴上水平居中*/
    align-items:center
 }
5.
.child{
      display:-webkit-box;
      -webkit-box-pack: center;
      -webkit-box-align:center;
}