button文字不居中是因为未在button自身设置display: flex、align-items: center和justify-content: center；需清除line-height、非对称padding、text-align及vertical-align等干扰样式，图标文字混合时优先用inline-flex。
button文字不居中，是因为没在button自身设flex对齐
Flex居中文字，必须让文字的直接父容器（即button）成为flex容器，并显式启用交叉轴对齐。常见错误是只给button加了display: flex，却漏掉align-items: center和justify-content: center——这两个属性缺一不可。
更隐蔽的问题是：有人把display: flex加在button的父容器上，指望它“透传”到按钮内部文字，这完全无效。文字居中必须作用于button自己。
-
align-items: center控制垂直居中（交叉轴），仅对flex容器生效 -
justify-content: center控制水平居中（主轴），同样只在flex容器内起作用 - 若
button是inline或inline-block，且未设display: flex，那这两个属性会被浏览器直接忽略
padding、line-height、text-align会干扰flex居中效果
一旦button启用了flex布局，就该清掉所有与对齐冲突的老习惯写法。这些样式不会报错，但会让文字看起来“偏上”“贴边”或“跳动”。
- 删掉
line-height：它和align-items: center共存时，可能引发渲染抖动，尤其在缩放或字体切换时 - 避免非对称
padding：比如padding-top: 8px; padding-bottom: 6px，会覆盖flex的视觉居中感 - 不用
text-align: center控制垂直方向：它只影响行内内容的水平对齐，对垂直无作用 - 别设
vertical-align：button是替换元素，内部文本不是独立行内框，这个属性在此无效
图标+文字混合时，必须用inline-flex而非flex
如果button里同时有<svg></svg>和文字，又希望它们整体垂直居中且保持按钮的行内流式行为（比如并排多个按钮），就不能用display: flex——它会让按钮变成块级，破坏布局上下文。
正确做法是改用display: inline-flex：
-
inline-flex让按钮仍参与行内流，不影响周围文字或其他按钮的排列 -
align-items: center此时能真正对齐图标和文字两个子节点，不受字体基线干扰 - 配合
gap: 0.5em代替左右margin，间距更可控、响应更稳 - 图标建议设
width: 1em; height: 1em; flex-shrink: 0，避免小屏下被压缩变形
字体特性可能导致“看起来没居中”，但其实已居中
即使代码完全正确，某些字体（如Inter、SF Pro Display）默认启用font-feature-settings: "ss02"等变体，会抬高小写字母x-height区域，造成文字视觉上“偏上”。这不是CSS失效，而是字体设计行为。
验证和应对方式：
- 临时加
font-feature-settings: "ss02" 0, "cv05" 0看是否回归预期位置 - 换用
font-family: system-ui对比，确认是否字体专属问题 - 真要像素级微调，优先用
padding-top和padding-bottom差值（比如+1px/-1px），比transform: translateY()可靠得多——后者破坏可访问性，且缩放时偏移失准
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
