按钮文字不居中应优先用padding控制垂直空间并移除line-height；字体混排时用flex布局居中；响应式下改用em/rem单位；text-align只影响内部文本对齐，不影响按钮自身定位。
按钮内文字不居中？检查 line-height 与 padding 是否冲突
按钮内文字“看起来偏上/偏下”，往往不是 text-align 的问题，而是行高和内边距没配平。比如设置了 height: 40px，又加了 line-height: 40px，但同时又写了 padding: 8px 16px——此时实际内容区高度只剩 24px，line-height 就会失效或错位。
- 优先用
padding控制垂直空间，移除line-height；现代按钮靠 padding 实现文字居中更可靠 - 若必须用
line-height，确保它等于按钮的净高（即height - padding-top - padding-bottom） - 避免在按钮上同时设
height和padding再加line-height——三者叠加极易超限或塌陷
不同字体下按钮文字对不齐？别碰 vertical-align
当按钮用了 -apple-system 和 Arial 混排，文字基线（baseline）天然不同，vertical-align: middle 在 inline 场景下几乎无效，且在 flex 容器里根本不起作用。
- 把按钮统一包进
display: flex容器，内部再用display: flex; align-items: center; justify-content: center居中文本 - 移除所有
vertical-align和line-height相关 hack，它们只在旧式 inline 布局里有意义 - 字体切换时（如系统字体回退），flex 内部的居中逻辑不受影响，而 baseline 对齐会立刻失准
响应式按钮文字缩放后错位？用 em 或 rem 配合 padding
文字随屏幕变小而缩放时，固定像素的 padding: 10px 会显得过大或过小，导致文字被“挤”到一角。
- 改用相对单位：
padding: 0.75em 1.5em，让内边距随字体大小等比缩放 - 避免
height固定值，改用min-height或完全依赖padding控制尺寸 - 如果必须限制最小高度，用
min-height: calc(1.5em + 0.5rem)这类组合式写法，兼顾可读性与弹性
text-align 对按钮本身无效？它只管按钮里的文字
给按钮元素直接加 text-align: center 是多余的——按钮默认就是块级或 inline-block，其内部文字天然按 center 对齐（除非显式重写）。真正容易出错的是：误以为 text-align 能控制按钮在页面中的位置。
-
text-align只作用于按钮内部的文本、图标等行内内容，不影响按钮盒子自身定位 - 想让按钮在父容器中右对齐，该用
margin-left: auto（flex 容器内）或justify-content: flex-end（父容器） - 给按钮加
text-align: justify没意义——单行按钮里没有换行断点，浏览器不会插入额外空格
复杂点在于：按钮文字对齐从来不是孤立问题，它牵扯到字体度量、盒模型计算、布局上下文三者耦合。最容易被忽略的是——你调的不是“文字”，而是整个渲染链路中某一个环节的输出表现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
