按钮文字不居中常因误用display: inline-flex——它依赖父级text-align而非自身flex属性，且align-items对匿名文本节点无效；应改用display: flex并同时设justify-content: center和align-items: center。
按钮文字不居中，是不是误用了 display: inline-flex？
不是所有 flex 容器都适合放按钮——display: inline-flex 看似保留行内特性，但它的对齐行为依赖父容器的 text-align，而不是自身 flex 属性。如果你直接给按钮设了 inline-flex 却没配父级 text-align: center，文字大概率会左偏或视觉错位。
- 按钮本身是替换元素（replaced element），默认有基线对齐逻辑，
inline-flex不会自动覆盖它 -
align-items: center在inline-flex中只影响子项（比如图标+文字的组合），不作用于按钮内部匿名文本节点 - 常见错误：在按钮上写
display: inline-flex; align-items: center;，却忘了文字是匿名 flex item，没被显式包裹，导致对齐失效
display: flex 才是按钮内文字居中的安全选择
按钮是块级语义元素，用 display: flex 更自然，也更可控。它让按钮自身成为 flex 容器，内部文字自动转为匿名 flex item，justify-content 和 align-items 能直接生效。
- 必须同时设置
justify-content: center（水平）和align-items: center（垂直），缺一不可 - 避免混用
line-height：如果按钮高度固定且只含单行字，line-height可能“看起来”居中，但它不处理图标、多行或字体 ascender/descender 偏差 - 检查
box-sizing: border-box：否则padding会撑出实际高度，压缩内容区域，造成文字“偏下”假象
IE11 兼容场景下 inline-flex 的补丁要写全
IE11 支持 flex 但不支持 inline-flex，强行使用会退化成 display: block，按钮独占一行，且 align-items 失效。这不是 bug，是规范缺失。
- 必须加前缀：
display: -ms-inline-flexbox，不能只写display: inline-flex -
align-items: center要补-ms-flex-align: center -
gap在 IE 完全无效，图标间距得回退到margin-right，且只能加在图标上，不能加在文字或伪元素上 - 如果项目不需要兼容 IE11，别加这些补丁——它们会让现代浏览器解析冗余 CSS，还可能引发意外交互
为什么父容器 text-align: center + 按钮 inline-flex 还是不居中？
这个组合理论上可行，但有硬性前提：按钮必须是父容器的**直接 inline-level 子元素**，且不能被其他样式干扰。
- 父容器需是块级（如
div），且明确设了text-align: center - 按钮不能设
width: 100%或flex: 1，否则它会撑满父宽，失去“被居中”的对象身份 - 按钮子项（如
svg或span）不能设flex-shrink: 0以外的 flex 属性，否则破坏 inline-flex 的自然流行为 - 最易忽略的一点：按钮上有
vertical-align: baseline（默认值），它会拉低整个按钮位置，进而让文字看起来偏下——加vertical-align: middle或top可修正
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
