1、兼容性不错的主流css绝对定位居中的用法：

注意：这种方法有一个很明显的不足，就是需要提前知道元素的尺寸。否则margin负值的调整无法精确。此时，往往要借助JS获得。

.conter{
  width: 600px; 
  height: 400px;
  position: absolute; 
  left: 50%; 
  top: 50%;
  margin-top: -200px;    /* 高度的一半 */
  margin-left: -300px;    /* 宽度的一半 */
  background: #000;
}

不需要知道自身的宽高尺寸

.conter2{
  position: absolute; 
  left: 50%; 
  top: 50%;
  transform: translate(-50%, -50%);    /* 50%为自身尺寸的一半 */
  background: #ff0;
}

需要知道自身宽高

.conter3{
  width: 600px; 
  height: 400px;
  position: absolute; 
  left: 0; 
  top: 0; 
  right: 0; 
  bottom: 0;
  margin: auto;    /* 有了这个就自动居中了 */
  background: #f00;
}