盒子居中与内容居中

最新推荐文章于 2023-03-18 22:22:35 发布

原创最新推荐文章于 2023-03-18 22:22:35 发布 · 1.8k 阅读

3 ·

CC 4.0 BY-SA版权

HTML与CSS 专栏收录该内容

73 篇文章

订阅专栏

本文详细解析了CSS中实现内容和盒子居中的方法，通过具体示例代码展示了如何使用text-align:center和margin:0 auto属性，帮助读者理解并掌握这两种不同场景下的居中技巧。

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

text-align: center：对内容进行居中处理

margin: 0 auto：对盒子进行居中处理

区别：

内容居中只对内容有效，例如文字、图片，对盒子模型无效；

盒子居中只对盒子模型有效，对盒子中的内容无效。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
.box1 {
	height: 300px;
	width: 300px;
	background-color: blue;
	margin: 0 auto;
	text-align: center;
}
.box2 {
	width: 100px;
	height: 100px;
	background-color: red;
}
img {
	height: 100px;
	width: 200px;
}
</style>
</head>
<body>
<div class="box1">
  <p>我是内容</p>
  <img src="111.jpeg">
  <div class="box2"></div>
</div>
</body>
</html>