居中相对定位和绝对定位的元素

来源：互联网发布：过期未注册域名查询编辑：程序博客网时间：2024/05/01 02:07

在正常情况下，如果要使一个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>

1 0