如何實現絕對定位元素的水平和垂直居中

1. 方法一
   以下方法支持IE9+(包含IE9，親測有效)

//HTML
<div class="father">
 <div class="son">
    哈哈
 </div>
</div>

//CSS
.father {
  position: relative;
  height: 100px;
  width: 100px;
  background-color: blue;
}
.son {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: red;
}

得到的結果如下圖所示：

2. 方法二
如果知道絕對定位元素的寬度和高度(兼容到所有支持絕對定位的瀏覽器，IE6+)

//CSS
.father {
  position: relative;
  height: 100px;
  width: 100px;
  background-color: blue;
}
.son {
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: red;
  height: 50px;
  width: 50px;
  margin-top: -25px;
  margin-left: -25px;
}

得到的結果如下圖所示

3. 方法三
該方法同樣需要知道絕對定位元素的寬度和高度(兼容到IE8+,包含IE8)

//CSS
    .father {
      position: relative;
      height: 100px;
      width: 100px;
      background-color: blue;
    }
    .son {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: red;
      height: 50px;
      width: 50px;
      margin: auto
    }

得到的結果如下圖所示

參考： 張鑫旭大大的：小tip: margin:auto實現絕對定位元素的水平垂直居中