垂直居中

不管是前端面试题，还是实际开发中，经常遇到使模块垂直居中的需求。

HTML：
<div class="box">
    垂直居中
</div>

PC端：

1、基于 绝对定位

• 兼容性好，IE6+
• 缺点：需要定宽高

.box {
  width: 200px;
  height: 200px;
  background-color: pink;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -100px;
}

2、基于 绝对定位 （升级版）

• 兼容性：IE9+
• 缺点：需要定宽高

.box {
  width: 200px;
  height: 200px;
  background-color: pink;
  position: absolute;
  top: calc( 50% - 100px);
  left: calc( 50% - 100px);
}

3、基于 绝对定位（最终版）

• 兼容性：IE9+
• 优点：不需要定宽高

.box {
  width: 200px;
  height: 200px;
  background-color: pink;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate( -50%, -50%);
}

4、基于 绝对定位（PC兼容版最佳实践）

• 兼容性：IE6+
• 优点：代码简洁，不需要定宽高

.box {
  width: 200px;
  height: 200px;
  background-color: pink;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}