text-align: center 仅使标题标签内文字水平居中，而非标题块自身居中；若无效，常见原因是加在父容器上或混淆了文字居中与块级元素居中。
text-align: center 是让标题文字居中的最直接方式，不是“让标题居中”，而是让标题标签内部的文字水平居中。
为什么 text-align: center 加了却没效果？
常见错误是把它加在父容器上，或者误以为它能让整个 <h1></h1> 块在页面中水平居中——它只影响块内行内内容的对齐方向。
-
text-align只对内联内容生效：文字、<span></span>、<img>（当未设display: block时） - 给
<h1></h1>自己加text-align: center才有效，加在<div> 上不会让 <code><h1></h1>居中，只会让它里面的文字居中 - 旧版 HTML 的
align="center"属性（如<h1 align="center"></h1>）已废弃，现代浏览器虽可能兼容，但校验不通过、语义错误、邮件客户端行为不可控
标题文字居中怎么写才稳妥？
直接在标题标签上用内联样式或类名控制：
<h1 style="text-align: center;">这是居中标题</h1>
或更推荐用 CSS 类：
.title-center { text-align: center; }
然后 HTML 中：
<h2 class="title-center">二级标题也居中</h2>
- 无需设置宽度、无需
margin: auto，因为text-align不依赖尺寸计算 - 对所有标题级标签（
<h1></h1>到<h6></h6>）都适用 - 注意：如果标题里混用了
float或display: inline-block的子元素，可能破坏行内格式上下文，导致部分文字不居中
想让整个标题块在页面中水平居中怎么办？
这时你真正需要的不是 text-align，而是让 <h1></h1> 这个块级元素自身居中。有三种常用路径：
- 加明确宽度 +
margin: 0 auto：width: 300px; margin: 0 auto;—— 但注意，width: fit-content在 Safari 15.4 之前需加-webkit-fit-content前缀 - Flex 布局父容器控制：
display: flex; justify-content: center;—— 简洁，但 iOS 9.3 之前 Safari 对justify-content: center在单行 Flex 容器中支持不稳定，尤其含图片时易偏移 - 避免用
<center></center>标签：它已被 HTML5 废弃，W3C 不再推荐，且在多数邮件客户端中表现异常
最容易被忽略的一点：text-align 和“元素居中”是两套逻辑，混用时容易反复调试却找不到问题根源。先确认你要居中的对象是“文字”还是“盒子”，再选对应方案。
