利用負margin實現元素居中
阿新 • • 發佈：2017-07-06
ott type relative 原理 text 相對 round border clas
原理就是對當前元素的position設置為absolute並且相對於父元素定位,先設置left:50%;top:50%使當前元素的左上角處於父元素的中心位置,之後再應用負margin特性使其中心位於父元素的中心.
負margin特性:負的margin-top,margin-left將當前元素往上/左拉,覆蓋其他元素;
負的margin-bottom,margin-right將當前元素的後續元素往上/左拉,覆蓋當前元素;
例如:
<!DOCTYPE html>
<htm>
<head>
<title></title>
<style type="text/css">
#father
{
position:relative;
width:200px;
height:160px;
border:1px dashed gray;
}
#son
{
position:absolute;
top:50%;
left:50%;
margin-top:-30px;
margin-left:-50px;
width:100px;
height:60px;
background-color:Red;
}
</style>
</head>
<body>
<div id="father">
<div id="son"></div>
</div>
</body>
</html>
在這個例子中,先利用position定位使#son的左上角位於#father的中心,再設置#son的margin-top,margin-left為其自身height/width的一般的負值,這樣就輕松將其中心移至父元素中心.
利用負margin實現元素居中