六种常用的设置水平垂直居中的方式

已知具体宽高

1.calc平均值

 .child {
      position: absolute;
      top: calc(50% - 100px);
      left: calc(50% - 75px);
    }

 

2.margin偏移

.child{
   left:50%;
   top:50%;
   margin-left:-100px;
   margin-top:-100px;
}

 

未知具体宽高

3.flex

.father{
 display:flex;
 justify-content:center;
 align-items:center;
}

4:margin:auto;

.child{
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  margin:auto;
}

5.translate偏移量

.child{
  position:absolute;
  left:50%;    /* 定位父级的50% */
  top:50%;
  transform: translate(-50%,-50%); /*自己的50% */
}

6.table

 .father {
      display: table-cell;
      text-align: center;
      vertical-align: middle; 
    }

.child {
    display: inline-block; 
 }