按钮水平居中且等距排列用 flex + justify-content: space-between，需父容器 display: flex、width 充足、按钮无 margin；纵向等距优先用 gap；单个按钮内居中用 flex + align-items/justify-content；表格中需 vertical-align: middle 与 box-sizing 协同。
按钮水平居中且等距排列用 flex + justify-content: space-between
多个按钮并排时既要整体居中，又要彼此等距，justify-content: space-between 是最直接的解法，但必须配合 display: flex 和明确的主轴方向。
- 父容器设
display: flex且justify-content: space-between，首尾按钮自动贴边，中间按钮均分剩余空间 - 必须确保父容器宽度足够（比如
width: 100%或显式设宽），否则 space-between 没空间可分配 - 按钮本身不要设
margin，否则会干扰 Flex 的间距计算 - 如果只有两个按钮，
space-between效果等同于左右撑开；三个及以上才体现“等距”优势 - 注意：该方式默认不控制垂直对齐，如需上下居中，加
align-items: center
垂直方向按钮等距分布优先用 gap 而不是 space-between
垂直导航菜单里多个按钮上下等距，gap 比 justify-content: space-between 更可控、更少副作用。
-
flex-direction: column+gap: 1.2rem可让相邻按钮间固定间距，首尾自然留空，无需硬写容器高度 - 若强行用
space-between，必须给父容器设height（如height: 400px），否则所有按钮挤在顶部 -
gap在 Chrome 84+、Firefox 63+、Safari 14.1+ 均支持，IE 完全不支持，需 fallback（如用margin-bottom） - 搭配
align-items: center可让所有按钮水平居中，避免文字长短导致左右错位
单个按钮自身居中且内部图标文字垂直居中
按钮内图标和文字“一高一低”，不是没居中，而是默认 vertical-align: baseline 在作祟。Flex 是唯一稳解。
- 按钮设
display: flex、justify-content: center、align-items: center - 必须显式设
height（如height: 40px）或min-height，否则align-items: center无参照 - 图标用
<svg></svg>或<i></i>都行，但别给它加vertical-align、line-height或margin - 文字和图标会自动并排居中；若只放图标，就别塞文字，避免 flex item 数量变化影响布局
表格单元格内按钮居中容易漏掉 box-sizing 和 vertical-align
表格里按钮总偏上或偏下，常见错误是只调 text-align 或 line-height，却忽略三要素协同。
<td> 必须显式设 <code>vertical-align: middle（别信默认值）<td> 建议设 <code>height（如height: 50px），否则按钮高度无法锚定- 按钮设
display: flex+align-items: center+justify-content: center - 按钮加
box-sizing: border-box，防止 padding/border 影响最终尺寸计算 - 绝对别用
line-height硬调——对含图标的按钮完全失效
实际项目里，“居中且等距”的难点不在某一行代码，而在于判断当前场景属于「多个按钮横向排布」「纵向堆叠」还是「单个按钮内部内容对齐」。混用
gap、space-between、flex 和 box-sizing 时，顺序和作用域稍有偏差，视觉就会失准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
