标题水平居中只需 text-align: center，因 h1~h6 默认块级且占满父宽，该属性直接作用于内部文字；禁用 align 属性、绝对定位或冗余包裹。
标题在页面顶端居中，本质是让 <h1></h1> 到 <h6></h6> 的文字水平居中，不是“把标题盒子挪到顶部中央”——它本来就在文档流顶部。关键只有一条：用 text-align: center，别碰 align 属性或定位。
为什么 text-align: center 就够了？
<h1></h1> 等标签默认是块级元素，宽度占满父容器；text-align: center 作用于其内部行内内容（即文字），直接让文字在块内水平居中。不需要设宽、不需 flex、更不需 transform 偏移。
- 错误做法：
<h1 align="center"></h1>—— HTML5 已废弃，VS Code 会标黄，严格模式下可能失效 - 绕路做法：给
<h1></h1>加position: absolute再left: 50%+transform: translateX(-50%)—— 脱离文档流，后续元素会上顶，破坏布局 - 冗余做法：套一层
<div> 再对 div 设置 <code>text-align—— 多一层 DOM，没额外收益怎么写才干净又可靠？
三种写法按优先级排序：
- 项目有统一 CSS 文件 → 在样式表里写：
h1 { text-align: center; }（推荐，可复用、易维护） - 仅单页单个标题 → 内联样式：
<h1 style="text-align: center">欢迎来到首页</h1> - 用 Tailwind 或类似框架 → 加类：
<h1 class="text-center">欢迎来到首页</h1>
注意：如果标题被其他 CSS 覆盖（比如某处写了
h1 { text-align: left !important; }），就得提高选择器权重或检查层叠顺序。立即学习“前端免费学习笔记（深入）”；
为什么有时“看起来没居中”？
常见错觉来源：
- 父容器有左右 padding 或 margin，导致标题文字虽居中，但整个区域偏移 —— 检查
body或外层<div> 的边距 <li>标题用了 <code>display: inline-block或float，破坏了块级行为 —— 这时text-align: center仍生效，但块本身可能变窄或浮动，视觉上“歪了” - 字体本身有不对称字形（如某些图标字体或手写体），造成视觉偏差 —— 这不是 CSS 问题，是字体设计问题
真正要小心的，是误把“文字居中”当成“元素居中”去折腾定位或 flex；最简方案往往最稳，尤其当标题就该老老实实待在文档流顶部时。
- 项目有统一 CSS 文件 → 在样式表里写：
