关于javascript:元素水平垂直居中三种方式

第一种形式：定位 + margin

优缺点：兼容性好，然而必须要晓得父元素的宽高

div.box{
    weight:200px;
    height:400px;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-100px;
    margin-top:-200px;
}

第二种形式：es6 transform

优缺点：兼容性不好，只反对 ie9 以上的。不须要晓得父元素的宽高

div.box{
    weight:200px;
    height:400px;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}

第三种形式：纯定位

优缺点：兼容性很好，不反对 ie7 以下的。不须要晓得父元素的宽高

div.box{
  width:200px;
  height:400px;
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  margin:auto;
}