基本思路
top:50%; left:50%;可以使元素的左上角处在居中位置，但并不是元素处于居中位置，这点要清楚。不过既然元素的左上角已经居中了。那么利用margin移动一下就可以让元素居中了。
例子
<meta charset="utf-8">
<div id="wrap">
<div id="ce">居中</div></div>
<style>
#wrap{
border:2px solid green;
width:200px;
height:200px;
position:absolute;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-100px;
}
#ce {
border:2px solid red;
width:40px;
height:40px;
position: relative;
top:50%;
left:50%;
margin-top: -20px;/*move top 20px*/
margin-left: -20px;/*move left 20 px*/
}
</style>
结果，如下
image.png
