如何将盒子移到页面中间 ——css

最新推荐文章于 2025-08-09 16:38:22 发布

成长的宁宁子

最新推荐文章于 2025-08-09 16:38:22 发布

阅读量149

点赞数

CC 4.0 BY-SA版权

文章标签： css 前端

本文链接：https://blog.csdn.net/m0_68821222/article/details/133152074

本文介绍了如何使用HTML和CSS创建一个300x300像素的红色框，通过绝对定位使其居中显示。主要涉及了DOCTYPE声明、<head>部分的meta标签、<title>标签以及.style中的样式规则。

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

代码编译：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.main_box{
			width: 300px;
			height: 300px;
			background-color: crimson;
			position: absolute;/* 绝对定位 */
			left: 50%;
			top: 50%;
			margin-left: -150px;
			margin-top: -150px;
		}
	</style>
	<body>
		<div class="main_box"></div>
	</body>
</html>

效果：