最直接方法是给标题设置text-align: center，它仅使标题内文字水平居中；若需标题块整体居中，则须用margin: 0 auto（配合width）或flex布局（父容器display: flex + justify-content: center）。
用 text-align: center 居中标题文字最直接
标题（<h1></h1> 到 <h6></h6>）默认是块级元素，内部文字左对齐。想让文字居中，只需给它加 text-align: center —— 这不是“把标题框居中”，而是“让标题里那行字水平居中”。
常见错误现象：<h2 align="center">标题</h2> 在现代浏览器中可能失效，因为 align 属性早在 HTML 4.01 就被废弃了，CSS 才是唯一可靠路径。
- 内联写法（适合快速验证）：
<h1 style="text-align: center;">居中标题</h1> - 内嵌写法（推荐用于单页）：
<style> h1 { text-align: center; } </style> - 外部 CSS（项目首选）：在
style.css中写h1 { text-align: center; }，再用<link rel="stylesheet" href="style.css">引入
要让整个标题块在页面中居中，得用 margin: 0 auto 或 flex
text-align: center 只影响内容，不改变标题自身在父容器里的位置。如果你发现标题文字是居中的，但标题上下/左右仍有大片空白、看起来“偏了”，说明你真正需要的是让这个 <h1></h1> 块自己居中——这时候必须控制它的外边距或父容器布局。
两种主流做法：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 传统方式：给标题设固定宽度 +
margin: 0 auto，例如<h1 style="width: 300px; margin: 0 auto;">标题</h1>；注意：没设width时margin: auto无效 - 现代方式：用 Flex 布局，把标题的父容器设为
display: flex并加justify-content: center，例如<h1>标题</h1>
别用 <center></center> 标签或 align 属性
这些是 HTML 早期的遗留写法，已被 W3C 废弃多年。虽然部分浏览器仍能渲染 <center><h2>标题</h2></center> 或 <h3 align="center">标题</h3>，但它们：
- 不符合现代 HTML5 规范，校验工具会报错
- 在严格模式（
）下行为不可靠 - 无法与 CSS 优先级、媒体查询等现代样式机制协同
真遇到老项目里残留的 align，第一件事就是全局搜索替换为 text-align 声明。
Flex 布局居中时，记得重置 margin 和 height
用 display: flex 把标题居中很简洁，但容易忽略两个关键点：
-
<h1></h1>默认有上下外边距（比如 Chrome 给<h1></h1>设了margin-top: 0.67em），会导致垂直方向“看起来没居中”——加一句margin: 0就解决 - 如果父容器（如
）没设高度，align-items: center垂直居中会失效；常用补救是min-height: 100vh或height: 100vh - Flex 容器若包含多个子元素，默认会换行；单个标题无需担心，但加了其他内容后要注意
flex-wrap行为
真正难的不是怎么写，而是分清你要居中的对象：是“标题里的字”，还是“标题这个盒子”。混淆这两者，90% 的居中问题就出在这儿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
