移动端按钮文字不居中是因为button是inline-level元素，内部文本为匿名节点，align-items无法直接控制；需设display:flex、justify-content:center，并清除padding/line-height/vertical-align干扰。
移动端按钮文字不居中，flex align-items: center 为啥没用？
因为 align-items: center 只对 flex 容器的直接子元素起作用，而按钮（<button>）本身是 inline-level 元素，内部文字不是独立子节点——它只是匿名文本节点，无法被 align-items 直接控制。
常见错误现象：button { display: flex; align-items: center; } 写了但文字还是偏上，尤其在 iOS Safari 或部分安卓 WebView 中更明显。
- 确保按钮设为
display: flex同时还加了justify-content: center（水平也居中） - 必须移除所有可能干扰的
padding、line-height、vertical-align（尤其是父容器设了vertical-align: top/bottom时） - 如果按钮里嵌了
<span>或图标，要确认它们没撑高容器或触发基线对齐
button 内部用 flex 居中，需要额外处理 font-size 和 line-height 吗？
不需要主动设 line-height，反而要小心它——很多老写法靠 line-height == height 垂直居中，但在 flex 下这会和 align-items: center 冲突，导致文字上下跳动或截断。
使用场景：纯文本按钮、带图标的按钮、动态文字长度变化的按钮（如“加载中…”）。
立即学习“前端免费学习笔记（深入）”；
-
font-size保持正常设置即可，flex 居中不依赖字号大小 - 删掉所有显式
line-height，让浏览器按字体度量自动计算行盒高度 - 若文字仍偏上，大概率是字体本身有较大
ascent或descent，此时可微调padding-top和padding-bottom补偿（iOS 系统字体尤其明显）
Android 和 iOS 对 button flex 居中的兼容性差异
iOS Safari（特别是 iOS 15–16）对 <button> 的默认样式重置更激进，会注入隐式 vertical-align: baseline 和额外内边距；Android Chrome 通常更贴近标准行为。
错误现象：同一段 CSS，在 iOS 上文字明显偏下，在 Android 上看起来刚好。
- 强制重置：给按钮加
vertical-align: middle（针对 inline-flex 或父级影响） - 用
-webkit-appearance: none干掉 iOS 默认按钮样式，再手动补border和background - 避免用
<input type="button">，它的内部渲染机制和<button>不同，flex 居中支持更差
更稳妥的替代方案：不用 flex，改用 padding + line-height
当项目需兼容低端安卓 Webview（比如 Crosswalk 或旧版 UC）或对首屏渲染性能极度敏感时，传统方式反而更稳。
参数差异：padding 是确定值，line-height 是相对值，两者组合容错率高，且不触发 flex 布局重排开销。
- 设固定高度（如
height: 44px），然后line-height: 44px+text-align: center - 优先用
padding控制高度（如padding: 12px 16px），不设height，避免文字换行时溢出 - 注意：
line-height在多行文本下失效，所以仅适用于单行按钮
<button>、<a> 还是带 role="button" 的 <div>——三者默认盒模型和基线行为完全不同。 
