在正常情况下,如果要使一个div居中,最常用的办法就是加一个属性margin:0 auto。但是在相对定位和绝对定位中却不起作用。但有些时候,确实需要对其进行居中。
在相对定位的情况下,元素是相对于其原来的位置进行定位的,我自己的思路是这样的,先相对于left右移50%,相对于top下移50%的宽度,然后这个时候元素的左上定点的坐标就是中心位置,这个时候,我们只需要在让其左边距和上边距分别为宽和高的一半,那么元素就可以居中了。
<html>
<head>
<title>元素居中</title>
<style type="text/css">
.box{
width:500px;
height:300px;;
margin-left:-250px;
margin-top: -150px;
position:relative/absolute;
left:50%;
top:50%;
background-color: #cc18b9;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>