text-align: center 是最轻量、兼容性最好的主标题居中方案，必须作用于块级父容器（如 div），而非 h1 自身；在 Flex 容器中应改用 justify-content: center，因 text-align 对其子项水平居中无效。
用 text-align: center 最直接
主标题居中本质是文本对齐问题，text-align: center 是最轻量、兼容性最好的方案。它作用于块级容器（比如 div 或 section），让内部行内元素（如 h1）自然居中。
常见错误是给 h1 本身加 text-align —— 没用，因为 h1 默认是块级元素，text-align 要写在它的父容器上。
- ✅ 正确写法：
<div class="card"><br> <h1>主标题</h1><br></div>
+.card { text-align: center; } - ⚠️ 不要写：
h1 { text-align: center; }（无效） - ? 如果卡片用了
display: flex，优先用justify-content: center，但注意这仅水平居中，align-items才管垂直
Flex 布局下用 justify-content 更可控
当卡片整体是 flex 容器（比如 display: flex; flex-direction: column;），主标题居中应靠 justify-content 和 align-items 配合，而不是依赖 text-align。
原因：flex 的对齐逻辑独立于文本流，text-align 在 flex 容器里对子项的水平对齐无效（除非子项是多行文本且需内部对齐）。
立即学习“前端免费学习笔记（深入）”；
- ✅ 水平居中：
justify-content: center（适用于flex-direction: row或column） - ✅ 水平+垂直居中：
justify-content: center; align-items: center; - ⚠️ 常见坑：
align-items: center对flex-direction: column是“水平居中”，不是“垂直居中”——术语容易混淆，以实际渲染为准 - ? 若主标题是唯一子元素，
margin: auto也能触发 flex 居中，但可读性不如justify-content
避免用 margin: 0 auto 给 h1 居中
margin: 0 auto 只对具有明确宽度的块级元素生效。而 h1 默认 width: auto（撑满父容器），此时 margin: 0 auto 等同于 margin: 0，完全不起作用。
- ❌ 错误示例：
h1 { margin: 0 auto; }→ 无效果 - ✅ 强行用的话，得加
width: fit-content或固定宽度，但没必要，增加冗余 - ? 这个写法适合按钮、卡片等有明确尺寸的元素，不适用于标题类语义元素
响应式场景下优先用 text-align，慎用 flex 单独包裹标题
如果卡片结构简单（比如只有标题+描述+操作），全局用 text-align: center 最省事；但如果卡片内其他内容（如图标、徽标）需要不同对齐方式，硬套 flex 容器反而会让布局变脆。
- ✅ 推荐结构：
div.card设text-align: center，内部h1、p、button各自按需设置text-align或margin - ⚠️ 避免结构：
<div class="title-wrapper"><h1>...</h1></div>单独 flex 居中——多一层 DOM，CSS 也更难维护 - ? 移动端断点里，
text-align可无缝配合max-width控制标题宽度，flex 则需额外处理flex-wrap和align-self
真正要注意的是父容器是否设置了 text-align: left 覆盖了继承，或者 flex 容器里混用了 float / position: absolute——这些才是居中失效的高频真实原因。
