怎么让盒子在盒子内居中

最新推荐文章于 2022-05-20 20:47:26 发布

QSWQSWQSWQSWQSW

最新推荐文章于 2022-05-20 20:47:26 发布

阅读量4.6k

点赞数 4

分类专栏： IT css html 文章标签：盒子在盒子内居中

本文链接：https://blog.csdn.net/qq_43209114/article/details/83536472

版权

IT 同时被 3 个专栏收录

83 篇文章 2 订阅

订阅专栏

html

41 篇文章 1 订阅

订阅专栏

css

36 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#demo{
				width: 500px;
				height: 600px;
				background: red;
				position: relative;
			}
			.box{
				width: 200px;
				height: 200px;
				background: black;
				position:absolute;
				left: 0;
			    right: 0;
			    top: 0;
			    bottom: 0;
			    margin: auto;
			}
			
		</style>
	</head>
	<body>
	
		<div id="demo">
			<div class="box"></div>
		</div>
		
	</body>
</html>

子绝父相。给父盒子相对定位，子盒子绝对定位，然后子盒子上下左右都为0，给它一个margin:auto。这样的话，不管宽高怎么变化，里面的盒子始终都是居中的。