水平垂直居中绝对定位元素

 1、需已知元素的宽和高

.box{
　　width: 300px;
　　height: 300px;
　　border: 1px solid red;
　　position: absolute;
　　left: 50%;
　　top: 50%;
　　margin-top:-50%;
   margin-left:-50%;
}

 2、使用css3的transform属性（存在兼容性问题：IE10+）

.box{
    width:300px;
    height:300px;
    border:1px solid red;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

 3、使用margin:auto（存在兼容性问题：IE8+）

.box{
    width:300px;
    height:300px;
    border:1px solid red;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;/* 50%为自身尺寸的一半 */

}