CSS居中方法

1.inline-block + table-cell

.child {
  display:inline-block;
  text-align:left;
}
.parent {
  text-align:center;/*或者在子元素中用margin：0 auto;代替*/
  display:table-cell;
  vertical-align:middle;
}
/*子元素文字会继承居中，因此要在上面写上向左边对齐*/

2.position定位

.parent {
  position:relative;
}
.child{
  position:absolute;
  left:50%;
  top:50%; /*参照物是父容器,相对于父元素偏移*/
  transform:translate(-50%,-50%); /*百分比的参照物是自身,相对于自身的反方向偏移*/
}

3.flex或grid (只兼容IE10+)

.parent {
  display:flex; /*或者display:grid;*/
  justify-content:center;
  align-items:center;
}