按钮文字居中需在按钮自身设置display: flex、align-items: center和justify-content: center；父容器仅控制按钮布局，避免padding、line-height等干扰样式。
按钮内文字不居中：检查 align-items 和 justify-content 是否作用在正确元素上
Flex 居中文字，本质是让按钮的 内容区（即文字）在按钮内部沿主轴和交叉轴对齐。常见错误是把 display: flex 加在按钮本身，却忘了设置对齐属性，或加在了父容器但没设子元素为 flex。
按钮默认是 inline 元素，即使加了 display: flex，若未显式设置 align-items: center 和 justify-content: center，文字仍按 baseline 对齐，看起来偏下。
-
align-items: center控制交叉轴（垂直方向）居中 -
justify-content: center控制主轴（水平方向）居中 - 两者必须同时存在，且作用于按钮自身（即文字的直接父容器）
子按钮使用 flex 居中：确保父容器是 flex 容器且子项无干扰样式
当多个按钮作为子元素放在一个容器里，想让每个按钮内部文字居中、同时按钮整体在父容器中居中，需分两层处理：父容器控制按钮位置，按钮自身控制文字位置。
典型错误是只给父容器设 display: flex; justify-content: center，结果按钮水平居中了，但文字仍靠左/靠上；或者给按钮加了 padding 或 line-height，反而破坏 flex 居中的效果。
立即学习“前端免费学习笔记（深入）”；
- 父容器设
display: flex+justify-content: center（水平）或align-items: center（垂直）来排布按钮 - 每个按钮自身必须设
display: flex+align-items: center+justify-content: center - 避免在按钮上设置
text-align、line-height或非对称padding，它们会与 flex 居中冲突
兼容性与性能注意：不要滥用 flex 套嵌，慎用 min-width/min-height
现代浏览器对 display: flex 支持良好，但嵌套过深（比如按钮里再包一层 span 又设 flex）容易导致对齐失效或渲染抖动。另外，如果按钮设置了 min-width 或 min-height，而内容极短（如只有“X”），可能造成视觉上“文字离顶部远”，误以为没居中。
- 按钮元素建议直接用
button标签，避免用div+role="button"后再套 flex —— 语义和行为都更复杂 - 如需固定尺寸，优先用
width/height而非min-width/min-height，避免 flex 计算偏差 - 移动端注意
font-size过小 +padding不足时，文字看起来“贴边”，实际是尺寸挤压所致，不是居中失效
button {
display: flex;
align-items: center;
justify-content: center;
padding: 8px 16px;
border: none;
background: #007bff;
color: white;
font-size: 14px;
}
.flex-container {
display: flex;
gap: 8px;
justify-content: center;
padding: 12px;
}
按钮文字居中这件事，表面是加两行 CSS，实际卡点往往在「谁该设 flex」和「有没有其他样式偷偷覆盖对齐行为」。特别是团队项目里，全局重置样式或组件库自带的 line-height 极易干扰，建议 inspect 元素后逐层关掉可疑样式验证。 
