基本思路
top:50%; left:50%;可以使元素的左上角處在居中位置遭笋,但并不是元素處于居中位置,這點要清楚徒探。不過既然元素的左上角已經(jīng)居中了瓦呼。那么利用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>
結(jié)果测暗,如下
image.png