中英文混排文字不居中并非CSS错误，而是字体度量（ascender/descender）差异导致基线不一致；应优先让英文字体fallback至与中文字体同源的版本（如Heiti SC、Noto Sans CJK SC），并配合min-height: 100dvh和避免line-height单独撑高来保障垂直对齐。
为什么中英文混排时文字看起来不居中
不是 CSS 写错了，是字体度量（font metrics）本身就不一致。中文字体（如 PingFang SC、Microsoft YaHei）的 ascender/descender 比例和英文字体（如 Helvetica、Roboto）差异很大，浏览器按各自字体的基线（baseline）渲染，结果就是“同一行里，中文偏下、英文偏上”或反之。
更麻烦的是：Android WebView 常 fallback 到系统默认 sans-serif，而它对中文字体的匹配逻辑不透明；iOS Safari 在小字号（≤12px）下还会放大渲染偏差。
用 font-family 显式控制 fallback 顺序
关键不是“选一个字体”，而是让所有字符尽可能走同一套度量体系。中英文混排时，优先让英文也 fallback 到中文字体里带西文的版本，而非系统默认的纯西文字体。
-
font-family: "PingFang SC", "Helvetica Neue", "Arial", sans-serif;—— 这样写，iOS 上英文会走Helvetica Neue，中文走PingFang SC，度量仍分裂 - 改成：
font-family: "PingFang SC", "Heiti SC", "Helvetica Neue", "Arial", sans-serif;——Heiti SC是黑体，自带西文字符且与中文字体度量对齐更稳 - 安卓端可加
font-family: "Noto Sans CJK SC", "Noto Sans", sans-serif;，Google 的 Noto 系列专为多语言对齐优化 - 避免只写
sans-serif或system-ui，它们在不同平台 fallback 结果不可控
align-items: center 失效？先检查容器有没有高度
很多“居中失败”其实是容器塌陷导致的假象。Flex 布局的 align-items: center 必须依赖父容器在交叉轴上有明确高度——而移动端常见问题就是 height: auto 或 min-height: 100vh 在 Safari 地址栏收起/展开时重算，造成瞬间高度为 0。
- 优先用
min-height: 100dvh（Chrome 105+ / Safari 16.4+），它始终反映当前可视区高度 - 兼容老设备：JS 注入
--vh变量 +calc(var(--vh, 1vh) * 100) - 给父容器加临时
background: #0002或border，确认它是否真占位 - 别在 flex 容器里再对子元素设
vertical-align，它对 flex item 完全无效
小字号（≤12px）下视觉偏移怎么微调
当字号极小（比如按钮内 10px 文字），字体渲染引擎对 ascender/descender 的像素级舍入误差会被放大，align-items: center 看起来仍偏上或偏下。
- 最低安全字号建议 ≥12px；若必须用 10–11px，请加
transform: translateY(-1px)手动补偿（仅 iOS Safari 需要，安卓通常更准） - 避免用
line-height单独撑高——它只影响行内盒，对混合字体的垂直重心无校正能力 - 测试时用包含
x、p、中、。的字符串，标点和小写字母最暴露偏差 - 不要依赖
text-orientation或writing-mode来“修复”横排混排——那是竖排专用属性，开了反而乱
真正难处理的不是代码怎么写，而是你得接受：不同平台、不同字体、不同字号下，“绝对居中”本就不存在。能做的是控制 fallback 路径、锁定容器高度上下文、在临界字号上留出 1px 视觉容错空间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
