div居中方法3

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

这里 父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>

 

阅读更多

没有更多推荐了,返回首页