盒子水平垂直居中的五大方案

页面结构代码：

​
<style>
  .father {
    width: 500px;
    height: 500px;
    background-color: blue;
  }
  .child {
    width: 100px;
    height: 100px;
    background-color: #fff;
  }
</style>
<div class="father" id="father">
   <div class="child" id="child"></div>
</div>

​/* 一，定位实现 子绝父相 */
/* 方式1  transform 有兼容性问题 */
.father {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
/* 方式2  用margin调距离，子元素必须有固定宽高 */
.father {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
}
/* 方3  子元素必须有固定宽高 */
.father {
  position: relative;
}
.child {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  
}

/* 二，flex布局 */
/* 方式4 flex有兼容性问题 */
.father {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* table布局 */
.father {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.child {
  display: inline-block;
}

/* JS实现 */
      let winW = father.clientWidth,
      winH = father.clientHeight,
      boxW = child.offsetWidth,
      boxH = child.offsetHeight;
      child.style.position = 'absolute'
      child.style.left = (winW - boxW)/2 + 'px';        
      child.style.top = (winH - boxH)/2 + 'px';