最直接方法是给标题设置text-align: center，仅居中标题内文字而非标题自身；废弃的align属性不可用；需居中整个标题块时应配合width+margin: auto或display: inline-block；flex布局则通过父容器控制居中。
直接用 text-align: center 控制标题文字居中
标题文字居中，本质是让 <h1></h1> 到 <h6></h6> 这类块级元素内部的文本水平居中，不是让标题标签自己在页面里居中。最稳妥、最通用的做法就是给标题加 text-align: center 样式。
常见错误现象：只给标题写 align="center"（比如 <h2 align="center">标题</h2>），这在现代 HTML 中已废弃，部分浏览器可能不兼容或被忽略。
- 推荐写法：用 CSS 类或内联 style，例如
<h2 style="text-align: center;">标题</h2> - 如果多个标题要统一居中，定义一个类更干净：
.title-center { text-align: center; }，再给<h3 class="title-center"></h3>使用 -
text-align只影响行内内容（文字、图片等），对标题自身宽高、位置无影响——它不会让标题“飘到页面正中央”，只是把字摆中间
别误用 margin: 0 auto 给标题设居中
有人看到“div 居中用 margin: 0 auto”，就顺手套在 <h2></h2> 上，结果没反应——因为标题默认是块级元素，但没有显式设置 width，浏览器会按父容器宽度撑满，margin: 0 auto 就失效了。
除非你明确想限制标题宽度（比如只占 400px 宽），否则没必要也不推荐这么做：
- 加了
width: 400px; margin: 0 auto;后，标题块本身会水平居中，但内部文字默认左对齐，还得额外加text-align: center - 响应式场景下固定宽度容易出错，尤其在小屏设备上可能溢出或换行异常
- 纯文字居中需求，
text-align一条规则就解决，何必多此一举
Flex 布局适合需要同时控制标题和周围元素的场景
如果你的标题不是孤立存在的，而是和按钮、图标、副标题一起放在一个容器里，并且整体需要居中+垂直对齐（比如页眉、卡片标题区），那就该用 Flex。
这时居中的主体是容器，不是单个标题：
- 给父容器设
display: flex+justify-content: center，标题自然水平居中 - 如果还要上下居中（比如容器有固定高度），再加
align-items: center - 注意：此时标题本身不需要任何
text-align，它的文字对齐由父容器的 flex 行为决定；但若标题内含多行文本或子元素，仍可能需单独处理
绝对定位和 line-height 是特定场景下的“偏方”
这两种方法存在明显局限，日常开发中应避免滥用：
-
line-height等于容器高度可实现单行文字垂直居中，但只适用于纯文本、固定高度、单行场景；换行或动态内容时会彻底失效 - 绝对定位（
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)）会让标题脱离文档流，影响后续元素布局，且需确保父容器有position: relative，调试成本高 - 它们都不是为“标题文字居中”设计的通用解法，属于历史遗留技巧，现代项目优先用
text-align或 Flex
真正容易被忽略的点是：居中目标必须分清——你要居中的是“文字”，还是“标题这个盒子”。混淆这两者，就会选错方案、加冗余代码、埋下响应式隐患。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
