text-align: center 即可使 h1–h6 内文字水平居中；需作用于标题自身或其父块级容器，不适用于内联子元素或 flex 父容器，且不影响块级子元素对齐。

text-align: center 就够了，别绕弯。

给 h1–h6 加 text-align: center 最直接

HTML 标题标签（h1 到 h6）默认是块级元素，文字左对齐。要让标题里的文字水平居中，只需在 CSS 中设置其自身或父容器的 text-align: center：

• h2 { text-align: center; } —— 全局生效，推荐
• <h3 style="text-align:center">标题</h3> —— 临时调试可用，不建议长期写内联
• 注意：这个属性作用对象是标题元素本身（块级容器），影响的是它内部的行内内容（即文字），不是把整个 h3 往页面中间“搬”
• 如果标题里嵌了 <span></span> 或图标，它们也会跟着居中；但若里面塞了个 <div>，那个 <code>div 不会自动居中——text-align 对块级子元素无效

  为什么加了 text-align: center 却没反应？

  常见失效场景和对应解法：

  • 父容器宽度塌陷：比如父 <div> 浮动了、或用了 <code>display: inline-block 但没处理换行空格，导致宽度为 0 —— 此时加 text-align 看不出效果。先用浏览器开发者工具检查该父容器是否真有宽度
  • 误加在子元素上：比如给标题里的 <span></span> 加 text-align: center，而 span 是行内元素，不接受该属性（它只接受 vertical-align）
  • CSS 优先级被覆盖：检查是否有更具体的规则（如 .header h2）把你的 h2 { text-align: center } 覆盖掉了
  • 用了 Flex 布局的父容器：如果标题的父容器设了 display: flex，那么 text-align 会被忽略，居中行为由 justify-content 控制

  想让整个标题块（不是仅文字）在页面中水平居中

  这是另一个问题，text-align 解决不了。你需要控制的是标题元素自身的定位：

  
  使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审
  使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。
  下载

  立即学习“前端免费学习笔记（深入）”；

  • 必须显式设置宽度，例如 width: 50% 或 max-width: 600px
  • 再加 margin: 0 auto —— 注意不是 margin: auto，前者明确上下为 0、左右自动分配，兼容性更稳
  • 此时标题内文字默认仍左对齐，如需文字也居中，得额外补一句 text-align: center
  • 响应式下慎用固定像素宽（如 width: 400px），小屏可能溢出；优先用百分比或 max-width + width: fit-content

  别碰 <title></title> 标签

  有人搜“HTML 标题居中”，结果去改 <title>网页标题</title> —— 这个标签只出现在 里，控制的是浏览器标签页上的文字，无法用 CSS 样式化，也根本不会显示在页面内容中。你真正要操作的，永远是 <h1></h1>～<h6></h6>。

  最易忽略的一点：居中从来不是孤立动作。它依赖上下文——父容器有没有宽高、是否脱离文档流、是否启用了 Flex/Grid。盯着一个属性调，不如打开开发者工具，一眼看穿元素的真实尺寸和布局模型。