div居中方法3

最新推荐文章于 2023-10-30 20:10:04 发布

晚i风

最新推荐文章于 2023-10-30 20:10:04 发布

阅读量192

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_36836332/article/details/81592596

利用绝对位置 百分比属性分配然后往回拉

这里父div使用相对位置，子div使用绝对位置，是他的父元素的 50% 50% 的位置开始

也就是从 fu的中心开始布置 zi的时候是这样的；

然后把 zi开始往回拉,拉取的距离是 zi的宽高的一半

margin-top: -50px;margin-left: -50px;

这样就可以了

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>居中3</title>
	<style>
		.fu{
			width: 400px;
			height: 300px;
			border: 1px solid green;
			position: relative;
		}
		.zi{
			width: 100px;
			height: 100px;
			background-color: teal;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-top: -50px;
			margin-left: -50px;
		}
	</style>
</head>
<body>
	<div class="fu">
		<div class="zi"></div>
	</div>
</body>
</html>