移动端列表项多行文本垂直居中必须用flex，因line-height失效、vertical-align对块级无效，且现代浏览器全支持；需父容器设display: flex+align-items: center及min-height防塌缩，禁用table-cell因破坏圆角、不响应字体缩放。
移动端列表项里多行文本垂直居中必须用 flex，不是可选而是唯一可靠路径
移动端列表（比如 <li> 或 <div class="item">）高度常由设计稿固定（如 88px），但内部文本行数不确定——这时 line-height 会失效，vertical-align 在块级容器上根本不起作用。现代移动浏览器（iOS Safari 10+、Chrome for Android 67+、Firefox Mobile）全支持 display: flex，直接设在列表项上即可，无需 wrapper、无需 hack。
- 父容器（列表项）必须设
display: flex+align-items: center，不是子元素 - 务必加
min-height（如min-height: 88px），避免内容少时容器塌缩导致“居中消失” - 禁用
line-height：它和 flex 的交叉轴对齐冲突，尤其在 iOS Safari 中会导致文字上浮或错位 - 如果列表项含图标+多行文本混合，
align-items: center同样生效，无需额外定位
为什么 display: table-cell 在移动端列表里不推荐
display: table-cell 看似能用，但在移动端列表场景下问题集中：它强制元素变成表格单元格行为，丢失 margin、flex、甚至部分 padding 的预期表现；更关键的是，当列表项使用 border-radius 或 overflow: hidden（常见于卡片式列表）时，table-cell 会破坏圆角裁剪，文字可能溢出边框。iOS 14–15 的 WebKit 对 table-cell 的 vertical-align 渲染也有轻微偏移，实测偏差达 2–3px。
- 必须配合固定
height，而移动端列表常需适配不同字号（如用户开启“更大字体”系统设置），height写死会截断文字 -
table-cell不支持aspect-ratio，响应式缩放时易失衡 - 与
touch-action: manipulation或cursor: pointer混用时，在部分安卓 WebView 中触发点击延迟
Flex 居中在 iOS 和安卓 WebView 中的兼容性细节
主流移动端浏览器已无兼容障碍，但有两个实际运行时差异点必须手动处理：
- iOS Safari 15.4–16.6 对
align-items: center在min-height容器中的计算有微小偏差，加flex-shrink: 0到子文本元素可稳定基线 - Android Chrome 110+ 在启用了“强制深色模式”的 WebView 中，若文本含
currentColor，align-items可能因颜色重绘触发重排，建议子元素显式设color - 不要用
margin: auto替代align-items：在旧版 Samsung Internet（v17.0 之前）中，它会使多行文本整体上移
真机调试时最常漏掉的三件事
写完 CSS 以为搞定，真机一跑就偏移——问题往往不在布局逻辑，而在环境假设：
立即学习“前端免费学习笔记（深入）”；
- 没关掉系统“增大辅助字体”：iOS 设置 → 显示与文字大小 → 更大字体，会让行高突变，
min-height必须配合rem或vh动态调整，不能只靠 px - 列表项用了
font-size: 16px但未设line-height: 1.4，导致多行文本行距过大，视觉上“撑高”了容器，align-items: center对齐的是内容盒，不是文字本身 - 父容器（如
<ul>）设了padding却忘了box-sizing: border-box，实际可用高度比预期少，align-items失去参照基准
