移动端卡片文字垂直居中首选 display: flex + align-items: center，需容器有明确高度，兼容iOS Safari 10+和Android Chrome 50+，避免误用 line-height 或 grid 的 align-content 陷阱。
移动端卡片里文字垂直居中总偏下？Flex最稳
直接说结论：在移动端卡片（尤其是固定高度、内容动态）中做垂直居中，display: flex + align-items: center 是兼容性最好、行为最可预测的方案。iOS Safari 10+、Android Chrome 50+ 都无坑，且对单行/多行文本、图片、混合内容都一致生效。
常见错误是只加 justify-content: center（水平居中），忘了设 align-items；或把 flex-direction 错写成 column 却没调整子元素顺序。
实操建议：
- 卡片容器必须有明确高度（如
height: 120px或min-height），否则align-items: center无参照基准 - 子元素不需要设
margin: auto或line-height，那会和 Flex 冲突 - 若卡片内含绝对定位元素（如角标），它们不受 Flex 居中影响，需单独处理
Grid垂直居中要小心 minmax() 和 align-content 的陷阱
display: grid 理论上更语义化，但移动端实际用起来容易出偏差。核心问题在于：当卡片内容高度小于容器时，align-content: center 不起作用——它只对多行网格轨道生效；真正起效的是 align-items: center（作用于单元格内内容），但很多人误配成 justify-items。
立即学习“前端免费学习笔记（深入）”；
典型翻车场景：
- 用
grid-template-rows: minmax(100px, auto)后，内容仍贴顶——因为minmax()生成的是单行轨道，align-content失效 - 设了
grid-template-areas却忘记给对应区域声明align-self: center - Android 4.4 WebView 中
place-items: center完全不解析，降级失效
如果坚持用 Grid，推荐写法：display: grid; align-items: center; justify-items: center;，并确保容器有确定高度。
line-height 方案在移动端已不推荐
过去常用 line-height 等于容器高度来“骗”垂直居中，但在移动端几乎必然失败：多行文本会撑高容器、字体渲染差异导致视觉偏移、iOS 上中文 fallback 字体 line-height 计算异常。
尤其当卡片内容来自 CMS 或用户输入时，无法保证单行，这个方案就等于埋雷。
除非你 100% 控制内容为单行纯英文，且容器高度固定、无缩放，否则跳过它。
真机调试时最常被忽略的点：viewport 和字体加载延迟
即使 CSS 写对了，真机上仍可能看到“闪动式居中”（先贴顶，再跳到中间）：这是因为 WebKit 在字体加载完成前按 fallback 字体计算行高，重排后才修正。
解决思路很具体：
- 在
<head>中加<meta name="viewport" content="width=device-width, initial-scale=1">，缺它会导致 iOS Safari 模拟桌面视口，Flex 行为异常 - 用
@font-face的font-display: swap减少阻塞，或对卡片容器加font-size: 0+ 子元素重设，避免初始重排 - 不要依赖
vh做卡片高度（Safari 地址栏收放会触发 viewport 高度变化，导致居中错位）
复杂点不在布局本身，而在移动浏览器对“高度”的定义比桌面端更动态——它随时可能被软键盘、地址栏、系统手势改变。所以固定高度 + Flex 是目前最省心的选择。
