卡片标题居中需确保容器有明确宽度或flex/inline-block布局、标题未脱离文档流、合理设置line-height；推荐用flex布局配合align-items:center实现可靠居中。
卡片容器必须有明确宽度和 display 属性
纯靠 text-align: center 对标题生效的前提是：标题所在元素（比如 <h3>）的父容器不能是默认的 block 但未设宽的“流式”盒子。常见错误是把卡片写成 <div><h3>标题</h3></div>，却没给外层 <div> 设 width 或触发 BFC 的 display，结果标题看似左对齐——其实是父容器撑不满视口，text-align 仍起作用，但视觉上没变化。
- 推荐给卡片容器加
display: inline-block或display: flex，二者都天然收缩内容宽度，让居中更可控 - 若用
display: block，必须显式设width（如width: 300px），否则它占满整行，text-align看不出效果 - 避免用
float布局卡片，它会脱离文档流，text-align在父级失效
标题元素本身别设 float 或 position: absolute
一旦给 <h3> 加了 float: left 或 position: absolute，它就脱离了普通文档流，text-align 在父容器上设置完全无效——因为居中是对“行内内容”生效的，而脱离流的元素不再参与行布局。
- 检查浏览器开发者工具里该标题的 computed styles，确认
float是none、position是static - 如果用了 CSS 框架（如 Bootstrap），注意某些 utility class（如
float-start）可能悄悄加了float - 想微调位置，优先用
margin或padding，而不是position
用 flex 布局更可靠，尤其多行标题场景
当卡片标题可能换行（比如文字较长或响应式缩放），仅靠 text-align: center 只能保证每行居中，但整段文字在卡片内垂直方向仍可能偏上。此时用 flex 是更稳妥的选择。
- 卡片容器设
display: flex+flex-direction: column - 标题元素加
align-self: center（水平居中）和align-items: center（若需整体居中，包括后续内容） - 示例：
<div style="display: flex; flex-direction: column; align-items: center;"> <h3 style="margin: 0;">我的卡片标题</h3> </div>
注意 font-size 和 line-height 对视觉居中的干扰
即使代码逻辑正确，标题看起来“没居中”，很可能是字体度量导致的错觉：大字号 + 小 line-height 会让文字底部压线，产生下沉感；反之过大 line-height 又显得悬浮。这不是居中失败，而是基线对齐问题。
立即学习“前端免费学习笔记（深入）”；
- 给标题设
line-height: 1.2或与font-size接近的值（如font-size: 18px; line-height: 18px）可减少偏差 - 不要依赖
vertical-align（它对块级元素无效），真要垂直居中卡片内标题，用 flex 的justify-content: center更直接 - 移动端 viewport 缩放后，像素级渲染差异会放大这种视觉误差，建议用 rem/em 而非 px 控制字号
