使用margin: auto或flexbox可实现标题居中。设置width与margin: auto使块级元素水平居中；通过父容器display: flex、justify-content: center实现灵活居中；box-sizing: border-box确保尺寸计算准确，避免布局溢出。
要通过CSS调整盒模型实现标题居中，关键在于控制元素的宽度、外边距以及盒模型属性。以下是几种常见且有效的方法。
使用 margin: auto 实现水平居中
对于块级元素如 h1、h2 等标题标签，设置固定或最大宽度后，可以通过自动外边距实现水平居中。
说明：将左右外边距设为 auto，浏览器会自动分配相等的空间，使元素居中。
示例代码：
h1 {
width: 80%;
max-width: 600px;
margin: 0 auto; /* 上下0，左右自动 */
padding: 20px;
box-sizing: border-box; /* 包含padding和border在width内 */
}
利用 flexbox 布局实现居中（推荐）
将父容器设置为 Flex 容器，可以轻松实现标题在水平和垂直方向上的居中。
立即学习“前端免费学习笔记（深入）”；
这种方法更灵活，尤其适合响应式布局。
示例代码：
.container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中（可选） */
height: 100vh; /* 设置容器高度 */
margin: 0;
padding: 0;
box-sizing: border-box;
}
<p>h1 {
margin: 0;
padding: 10px;
}</p>调整 box-sizing 改变盒模型行为
CSS 的 box-sizing 属性影响元素的宽度和高度计算方式。默认为 content-box，设置为 border-box 后，padding 和 border 会被包含在 width 和 height 内部，便于精确控制布局。
这对居中有间接帮助，尤其是在设置百分比宽度并带有 padding 时不会超出预期范围。
建议统一设置：
* {
box-sizing: border-box;
}
基本上就这些方法。结合 margin: auto 或 flexbox，再合理使用 box-sizing，就能稳定实现标题居中效果。
