最直接可靠的方案是 display: flex，容器设 display: flex 和 justify-content: center 实现水平居中，配合 gap 控制间距；旧浏览器退化为 text-align + inline-block；禁用 margin: 0 auto 直接作用于多个按钮。
用 display: flex 最直接可靠
现代浏览器下，display: flex 是让多个按钮水平居中排开的首选方案。它天然支持对齐、间距控制和响应式伸缩，比老式 text-align + inline-block 更可控。
关键点：容器设为 display: flex，再用 justify-content: center 居中主轴（默认是水平方向）。
- 按钮本身无需加
float或margin调整位置 - 如果按钮间需要等距空隙，加
gap: 8px（推荐，比手动设margin更干净） - 容器必须有明确宽度或撑开逻辑（比如设
width: 100%或放在块级上下文中），否则可能“看不见居中效果”
<div style="display: flex; justify-content: center; gap: 8px;"> <button>保存</button> <button>取消</button> <button>删除</button> </div>
旧浏览器兼容时用 text-align + inline-block
IE10 及更早版本不支持 flex，这时得退回到传统方式：父容器设 text-align: center，按钮设 display: inline-block。
容易踩坑的是：按钮默认是 display: inline，但 inline 元素无法设宽高/内边距生效不一致，所以必须显式写 inline-block。
立即学习“前端免费学习笔记（深入）”；
- 按钮之间会因换行符或空格产生约
4px的意外间隙，解决方法之一是父容器设font-size: 0，按钮内再单独设字体大小 - 若按钮高度不一致，
vertical-align: middle要加在按钮上，否则会底部对齐 - 这个方案在 Flex 布局可用的前提下，已不推荐新项目使用
<div style="text-align: center;"> <button style="display: inline-block; vertical-align: middle;">提交</button> <button style="display: inline-block; vertical-align: middle;">重置</button> </div>
别用 margin: 0 auto 直接套按钮
margin: 0 auto 对单个块级元素有效，但对多个按钮无效——它不会让一组按钮整体居中，只会让每个按钮自己居中（结果是全部叠在一起）。
常见错误写法：
<button style="margin: 0 auto;">A</button> <button style="margin: 0 auto;">B</button>
这样两个按钮都会试图在各自行内居中，实际效果混乱，且无法控制间距。
- 除非你把所有按钮包进一个
div并设为display: block+width+margin: 0 auto，但这又绕回需要额外容器，不如直接用 Flex - 绝对定位 +
left: 50%+transform: translateX(-50%)也能居中，但需知道总宽度或用 JS 计算，维护成本高，不适用于动态数量按钮
响应式场景下注意 flex-wrap
按钮数量多、容器窄时，flex 默认会压缩按钮甚至溢出。这时候要主动决定行为：
- 希望按钮折行：加
flex-wrap: wrap，再配合justify-content: center，每行都居中 - 希望按钮缩小自适应：加
flex: 1到每个按钮（慎用，文字可能被挤掉），或设min-width: 0防止弹性失效 - 希望禁止折行并横向滚动：加
white-space: nowrap和overflow-x: auto，适合工具栏类场景
没加 flex-wrap 时，按钮强行挤在同一行，可能触发横向滚动条或内容截断——这不是 bug，是 Flex 的默认行为，得按需干预。
