text-align: center 是最直接可靠的方式，仅居中 h1 内部文字而不影响其块级特性；它兼容所有浏览器，无需额外容器或复杂布局，但仅适用于文字居中，不控制 h1 块自身位置。
text-align: center 是最直接、最可靠的方式，适用于绝大多数场景。它不改变 h1 的块级特性，只让内部文字居中对齐。
为什么 text-align: center 就够用了？
h1 默认是块级元素，本身占据整行宽度；text-align 控制的是其**内联内容（即文字）在块容器内的水平位置**，不是“移动整个标签”。所以：
- 无需包裹
div，直接写<h1 style="text-align: center">标题</h1>即生效 - 若用外部 CSS，写
h1 { text-align: center; }即可批量控制所有h1 - 它兼容所有浏览器，包括 IE8+，无任何兼容性风险
- 不会影响后续元素的布局流，也不会触发 BFC 或改变盒模型
别用 align="center" 属性
HTML5 已废弃 align 这类 presentational 属性：
-
<h1 align="center">标题</h1>在现代 HTML 验证器中会报错 - 部分浏览器仍能渲染，但行为不可靠（比如在某些 strict mode 下被忽略）
- 它无法继承、无法用 CSS 覆盖，后期维护困难
什么时候不该只用 text-align？
如果你实际想实现的是「整个 h1 块在父容器中水平居中」（比如加了背景色、边框、或设置了 width），那 text-align 就不够了——它只居中文本，不居中块本身。
- 若
h1设置了width: 300px，需配合margin: 0 auto才能让块居中 - 若父容器高度固定且需垂直+水平居中，
display: flex+justify-content: center+align-items: center更稳妥 - 用
position: absolute+transform: translateX(-50%)容易因父容器position缺失而失效，慎用
真正容易被忽略的点：很多人以为 text-align: center 是“把 h1 居中”，其实它只是让文字在 h1 这个盒子内部居中；如果 h1 自身被其他样式（如 float、display: inline-block）改变了布局上下文，text-align 可能看起来“没效果”，这时得先检查它的 display 和父容器的 text-align 继承关系。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
