最可靠解法是display: flex + align-items: center + justify-content: center，需父容器设明确高度（如height: 100vh），且子元素不能脱离文档流；line-height方案因字体渲染、基线对齐等限制，在真实项目中极易失效。
直接用 display: flex + align-items: center + justify-content: center 是当前最可靠、最少坑的解法。别再死磕 line-height 和 height 是否相等——它只在极窄条件下成立，而现实项目里几乎总有一条不满足。
为什么 line-height == height 还是偏移
这不是你写错了，是 CSS 渲染机制本身不保证视觉居中：line-height 控制行框高度，不是文字的视觉重心。常见干扰项包括：
-
box-sizing默认是content-box，padding和border会挤占内容区，导致实际可用高度小于height - 按钮里混了
svg或img，它们按基线（baseline）对齐，把整行“拉高” - 用了 Inter、SF Pro 等字体，默认开启
font-feature-settings: "ss02"，抬高小写字母 x-height 区域 - 父容器是
display: flex或grid，此时line-height对子元素完全失效 - 写了
vertical-align: middle在按钮或其子元素上，和line-height冲突
什么时候必须切到 flex 布局
只要出现以下任意一种情况，line-height 就不再是“够用”，而是“埋雷”：
- 按钮要显示图标 + 文字（比如
svg+span） - 响应式下按钮宽度可能变窄，文字有换行风险
- 用了
font-size: clamp()或 CSS 变量动态控制字号 - 按钮嵌在
position: absolute、flex或grid容器里 - 需要兼容 Safari 9.1 以下或旧版 Android WebView
此时直接写：display: flex; align-items: center; justify-content: center; ——它不看字体基线，不 care 换行，也不吃 vertical-align 的亏。
用 flex 后文字还是看起来偏上？检查这三点
Flex 居中本身没问题，但视觉偏差常来自字体层面：
- 确认没在按钮或子元素上误写
line-height：二者共存会导致文字上下跳动 - 检查
font-family是否启用了干扰性字体特性，比如font-feature-settings: "ss02" 1, "cv05" 1；临时禁用验证：font-feature-settings: "ss02" 0, "cv05" 0 - 小写字母（如
x）天然视觉重心偏低，真机上尤其明显；若按钮只含单字符（如关闭按钮），优先用大写X或符号×
真正难处理的，是既要兼容 IE11、又得在 iOS Safari 上一致、还嵌了 iconfont 的按钮。这时候，line-height 是妥协起点，flex 是交付底线，而字体特性调试，往往才是最后卡住的那 1px。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
