【css】两个div位于网页正中央

最新推荐文章于 2023-08-13 00:34:20 发布

原创最新推荐文章于 2023-08-13 00:34:20 发布 · 431 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

WEB 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用CSS进行绝对定位和相对定位的实例，通过两个不同大小的div元素演示了如何在页面中心精确对齐内容。这涉及到对CSS属性如position、margin、width和height的理解和应用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试</title>
		
		<style type="text/css">
			*{
				font-family: 微软雅黑;
				margin: 0px;
			}
			.d1{
				width: 500px;
				height: 300px;
				background: #f00;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -250px;
				margin-top: -150px;
				
				
			}
			.d2{
				width: 200px;
				height: 100px;
				background: #0f0;
				position: relative;
				left: 50%;
				top: 50%;
				margin-left: -100px;
				margin-top: -50px;
			}
		</style>
	</head>
	
	<body>
		<div class="d1">
			<div class="d2"></div>
		</div>
	</body>
</html>