让元素上下居中的几种办法

 1. vertical-align: middle;

2. 绝对定位

.child{
  position: absolute;
  top: 50%;
  transform: translate3d(0, -50%, 0);
}

3. 使用flex

.parent{
  display: flex;
  align-items: center;
}

4. display: table-cell;

.parent{
  display: table;
  height:300px;
}
.child{
  display: table-cell;
  vertical-align: middle;
}