元素水平垂直居中·三种方式

第一种方式：定位 + 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;
}