怎么让盒子在盒子内居中

最新推荐文章于 2025-02-11 13:08:36 发布

原创最新推荐文章于 2025-02-11 13:08:36 发布 · 4.7k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#盒子在盒子内居中

IT 同时被 3 个专栏收录

83 篇文章

订阅专栏

html

41 篇文章

订阅专栏

css

36 篇文章

订阅专栏

本文介绍了一种使用CSS实现元素居中的方法：通过给父元素设置相对定位，子元素设置绝对定位，并结合margin:auto属性，使得子元素无论大小如何变化都能保持在父元素的中心位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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。这样的话，不管宽高怎么变化，里面的盒子始终都是居中的。