按钮文字垂直居中问题源于浏览器对input[type="button"]和button的内边距、line-height解析差异；推荐单行按钮用height+line-height方案，多行或含图标时改用display:flex布局，并统一使用button标签以提升兼容性。
按钮文字在不同浏览器里上下位置不一致，不是“居中”而是“偏上”或“压底”，根本原因不是你写错了，是 input[type="button"] 和 button 默认有不可见的内边距、行高偏差，且各浏览器对 ::-moz-focus-inner、line-height 解析逻辑不同。
用 line-height + height 控制单行按钮文字
这是最轻量、兼容性最好的方式，但只适用于固定高度、单行文本的按钮（比如「提交」「取消」这类短文案）。
-
height必须显式设置，不能依赖内容撑开 -
line-height设为和height相同值，文字才能视觉居中 - 若按钮含图标或使用了
font-size改变字号，需同步调整line-height值，否则会偏移 - Firefox 会额外渲染一个 focus outline 内边距，必须加
input::-moz-focus-inner { border: 0; padding: 0; }重置
示例：
button {
height: 32px;
line-height: 32px;
font-size: 14px;
}
input[type="button"] {
height: 32px;
line-height: 32px;
font-size: 14px;
}
input::-moz-focus-inner {
border: 0;
padding: 0;
}
改用 display: flex 替代原生按钮样式
当按钮需要多行文字、图标混合、或响应式缩放时，line-height 就失效了。这时应把按钮转为块级容器，用 Flex 布局接管对齐逻辑。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 不能直接对
input[type="button"]应用display: flex（部分老浏览器不支持） - 推荐改用语义化
button标签，并设display: inline-flex或display: flex - 必须加
justify-content: center和align-items: center，缺一不可 - 如果按钮内嵌了
span或svg，注意它们默认是基线对齐，flex 下可忽略
示例：
button {
display: inline-flex;
justify-content: center;
align-items: center;
height: 36px;
padding: 0 16px;
}
避开 input 按钮，统一用 button + CSS 重置
IE8 及更早版本对 input[type="button"] 的盒模型处理异常，而 button 标签在所有主流浏览器中行为更一致。
- 优先用
<button type="button">提交</button>，而非<input type="button" value="提交"> -
button默认有vertical-align: middle，但会被父容器line-height干扰，所以仍建议显式设display: flex或重置line-height - Chrome/Safari 对
button的padding渲染比input更稳定，尤其小尺寸按钮（如 24px 高） - 若必须用
input（例如表单自动生成场景），务必加appearance: none并手动控制所有盒模型属性
真正麻烦的不是怎么居中，而是居中后在 Safari iOS 上字体下沉、在 IE11 中按钮被拉高——这些都源于浏览器对替换元素（replaced element）的默认渲染策略。越想“一刀切”，越容易掉进兼容性坑里。实际项目中，建议按按钮使用场景分层：简单操作用 line-height，复杂交互用 flex，遗留系统则锁定 button + 全局重置样式。
