display: flex + align-items: center 是最直接有效的解法，因 vertical-align 对 h2/h3 等块级元素无效；需确保卡片有明确高度或 min-height，标题不设 margin: auto，且仅对标题容器应用 flex 而非整个卡片。
卡片内部的标题（<h3></h3>、<h2></h2>等）要垂直居中，关键不是“对齐文字”，而是让整个标题元素在卡片容器的交叉轴上居中——display: flex + align-items: center 是最直接有效的解法。
为什么不能只用 vertical-align: middle
vertical-align 对 <h2></h2> 这类块级元素完全无效，它只作用于行内元素（如 <span></span>、<img>）或 display: table-cell 元素。直接写 h3 { vertical-align: middle } 不会产生任何效果。常见错误是把它和表格单元格逻辑混淆，但卡片容器几乎从不设为 table-cell。
flex 布局实现标题垂直居中的硬条件
给卡片容器（比如 .card）设 display: flex 后，必须同时满足以下三点，align-items: center 才真正生效：
- 父容器（卡片）必须有明确的高度约束，例如
height: 200px、min-height: 120px，或被其他内容撑开；否则交叉轴无参考长度，“center”无法计算 - 标题元素本身不能设
margin: auto（尤其上下边距），这在 Safari 中会与align-items冲突，导致偏移 - 如果卡片内还有其他元素（如描述文字、按钮），且你只想让标题垂直居中，而不是所有子元素一起居中，那就不能把整个卡片设为 flex 容器——应改用
grid或仅包裹标题的局部容器设 flex
当卡片高度不固定时怎么处理
响应式卡片常靠内容撑高，此时 flex 的 align-items: center 仍可用，但需确保卡片最小高度足够容纳居中逻辑：
- 给卡片加
min-height: 80px（根据字体大小和行高估算），避免空卡片时高度塌缩 - 标题自身可加
margin: 0清除默认外边距干扰，防止视觉偏移 - 若标题下还有段落，又想保持标题在卡片上半区“视觉居中”，不要依赖
align-items，改用padding-top+text-align: center组合更可控
表格型卡片里标题怎么居中
如果卡片本质是 <table> 或用了 <code>display: table 模拟布局，vertical-align: middle 才真正适用——但它必须写在 <td> 上，而非标题标签上：
<pre class="brush:php;toolbar:false;"><td style="vertical-align: middle; padding: 12px;">
<h3>标题</h3>
</td></pre>
<p>注意：一旦 <code><td> 内部嵌套了 <code><div> 或设置了 <code>display: flex，vertical-align 就立即失效，此时必须切换到 flex 或 grid 方案。
真正容易被忽略的是：垂直居中是否“可见”，取决于卡片容器是否有可测量的交叉轴长度——没有 height、min-height 或撑开内容，再正确的 CSS 也出不来效果。
