html结构:
<div id="wrap">
<div id="box"></div>
</div>
css样式:
方法一:
#box{
position: absolute;
left: 50%;
top: 50%;
width: 200px;
height: 200px;
background: red;
margin: -100px 0 0 -100px;
}
方法二:
#box{
position: absolute;
width: 200px;
height: 200px;
background: red;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
方法三:
#box{
position: absolute;
left: 50%;
top: 50%;
width: 200px;
height: 200px;
background: red;
margin: -100px 0 0 -100px;
transform: translate(-100px,-100px);
-webkit-transform: translate(-100px,-100px); //兼容webkit浏览器
-moz-transform: translate(-100px,-100px);//兼容moz浏览器
}