最直接方法是给标题设置 text-align: center；它仅居中标题内的文字，不影响标题自身位置；废弃的 align 属性不可用；需居中整个标题块时应配合 width + margin: auto 或 display: inline-block；flex 布局则通过父容器控制居中。
用 text-align: center 居中标题文字最直接
html 标题（<h1></h1> 到 <h6></h6>）本身是块级元素，不加样式时默认左对齐。想让文字居中，核心就是给它加 text-align: center —— 这不是“居中标题”，而是“让标题里的文字居中”，别混淆了。
常见错误是以为要改 margin 或 position，结果绕远路还容易破坏文档流。
- 写在
style属性里：
我的标题
- 写在 CSS 规则里更推荐：
h2 { text-align: center; } - 注意：这个属性只影响**行内内容的水平对齐**，不影响标题自身的宽度或位置
别用 align 属性——它已废弃且不生效
老教程里常看到 <h2 align="center"></h2>，这在 html5 中完全无效，现代浏览器虽可能兼容，但属于被废弃的属性，W3C 不再支持，VS Code 或浏览器开发者工具通常会标黄警告。
用它等于埋个隐性兼容雷，尤其在严格模式（）下更不可靠。
立即学习“前端免费学习笔记（深入）”；
- ❌ 错误写法：
<h3 align="center">别这么写</h3> - ✅ 正确替代：
<h3 style="text-align: center">这么写</h3>或配 CSS 类 - 如果项目用了 CSS 预处理器或框架（如 Tailwind），优先用类名控制，比如
<h4 class="text-center"></h4>
居中整个标题块（含左右留白）需配合 margin: auto
有时候你以为“标题没居中”，其实是标题宽度不够宽，左右有空白，看起来偏左。比如给 <h2></h2> 加了 width: 200px 又没设 margin，它就贴着左边了。
这时要让整个标题盒子水平居中，得用 margin: auto，但前提是它得有明确宽度（或 display: inline-block 等触发 BFC）。
- 需要固定宽度时：
h2 { width: 300px; margin: 0 auto; text-align: center; } - 不想设宽度？改显示方式：
h2 { display: inline-block; margin: 0 auto; text-align: center; }（注意父容器得是块级且宽度足够）
- 别单独只写
margin: auto，没宽度的块级元素，auto在左右方向不起作用
Flex 布局居中适合响应式或复杂容器
如果标题在一个卡片、导航栏或弹性容器里，用 Flex 是更现代、更可控的方式，尤其当你要同时垂直+水平居中，或者标题旁还有图标、按钮时。
关键点在于：居中的是**父容器**，不是标题自己。
- 父容器加：
.header { display: flex; justify-content: center; align-items: center; } - 子标题不用额外样式，
<h1></h1>自然居中；若只要水平居中，去掉align-items即可 - 注意：Flex 对 IE10+ 支持良好，但 IE9 及以下不支持，老系统项目要谨慎
- 别忘了设父容器高度（如
min-height: 100vh），否则align-items: center垂直居中可能没效果
实际用哪种，取决于你手头的结构：纯文字居中，text-align 足够；要控制标题块位置，看是否需宽度 + margin；嵌套在现代布局里，Flex 更稳。最容易被忽略的是——没确认父容器的宽度和文档流状态，光调标题样式，往往白忙活。