css 水平垂直居中

方法1:

父类
.box {
    display: table-cell;
    vertical-align: middle;
    text-align: center;        
}

方法2: flex布局

父类
.box {
    display: flex;
    align-items: center;
    justify-content: center;
}

方法3: 绝对定位

父类:
.box {
  position: relative;
}
子类:
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}