1、需已知元素的宽和高
.box{
300px;
height: 300px;
border: 1px solid red;
position: absolute;
left: 50%;
top: 50%;
margin-top:-50%;
margin-left:-50%;
}
2、使用css3的transform属性(存在兼容性问题:IE10+)
.box{
300px;
height:300px;
border:1px solid red;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
3、使用margin:auto(存在兼容性问题:IE8+)
.box{ 300px; height:300px; border:1px solid red; position:absolute; top:0; left:0; right:0; bottom:0; margin:auto;/* 50%为自身尺寸的一半 */
}