17.定位的盒子居中显示

最新推荐文章于 2023-11-03 10:33:06 发布

neilro

最新推荐文章于 2023-11-03 10:33:06 发布

阅读量331

点赞数

分类专栏： Div+Css 文章标签：定位

本文链接：https://blog.csdn.net/neilro/article/details/79245723

版权

Div+Css 专栏收录该内容

22 篇文章 2 订阅

订阅专栏

效果：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>定位的盒子居中显示</title>
		<style type="text/css">
			body{
				margin:0;
				padding:0;
			}
			.box{
				height:500px;
				background:gray;
				position:relative;
			}
			.nav{
				height:50px;
				width:800px;
				background:red;
				position:absolute;
				/*定位的盒子居中：先左右走父元素盒子的一半50%，
				 * 在向左走子盒子的一半(margin-left:负值。)*/
				bottom:0;
				/*这是关键*/
				left:50%;
				margin-left:-400px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="nav"></div>
		</div>
	</body>
</html>