按钮居中不能仅靠margin: 0 auto，因其默认为inline-block而非块级元素，需先设display: block或配合text-align: center；且必须有明确宽度（如fit-content、px值），父容器上下文（如flex/grid/float）也决定其是否生效。
按钮居中不是加一个 margin: 0 auto 就完事——它失效的频率远高于生效，根本原因在于你没管清它的 display 类型、宽度约束和父容器上下文。
为什么 margin: 0 auto 经常不生效？
它只对块级元素起作用，而 <button> 默认是 inline-block，不是块级。直接写 margin: 0 auto 等于对一个行内元素设左右自动外边距，浏览器直接忽略。
- 必须先让按钮变成块级：
display: block或display: inline-block+text-align: center（后者靠父容器） - 块级后还得有明确宽度：
width: fit-content、width: 120px或max-width: 80%；写width: 100%或留空，margin: 0 auto依然无效 - 别在按钮上写
text-align: center——那是居中按钮里的文字，不是按钮本身
text-align: center 适合什么场景？
这是最轻量的水平居中法，但只作用于父容器，且仅影响其内部的行内级内容。
- 适用：单个或多个按钮并排，父容器是
<div>、<section>等块级元素时 - 写法：给父容器加
text-align: center，按钮保持默认inline-block（无需改display） - 限制：只管水平，不管垂直；若父容器高度固定，按钮会贴顶，得额外加
padding-top或设line-height拉高 - 陷阱：如果父容器里混了
float元素或display: flex子项，text-align可能被覆盖或失效
Flex 布局实现水平+垂直居中要配哪些条件？
这是现代项目中最稳的一维居中方案，但漏掉任一前提就会“看起来没动”。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须设
display: flex，否则justify-content和align-items不生效 - 要垂直居中，父容器得有明确高度：
height: 100vh、min-height: 300px或继承自父级的高度；纯height: auto下align-items: center无视觉变化 - 按钮本身不用设宽高或
display，Flex 自动处理；多个按钮时，用justify-content: space-between或center控制间距 - IE10+ 支持良好，但 IE9 及更早版本完全不支持，需降级为
margin: 0 auto+ 块级方案
表格单元格（<td>）里按钮怎么垂直居中？
vertical-align: middle 必须加在 <td> 上，不是按钮上——这个属性由父容器控制子元素对齐，且只对 inline/inline-block 有效。
- 错误写法：
button { vertical-align: middle }→ 完全无效 - 正确写法：
td { vertical-align: middle }，前提是td有足够高度空间 - 如果
td高度刚好等于按钮高度，middle和top看起来一样；解决方法：显式设height: 48px，或用padding: 12px 0撑开内容区 - 更可靠替代：给
td设display: flex; align-items: center，无需调高度，但注意这会让vertical-align失效，二者不能共存
真正容易被忽略的点是：按钮居中从来不是孤立操作，它永远依赖父容器的 display 类型、尺寸约束和定位上下文。同一个按钮，在 <div> 里用 Flex 居中，在 <td> 里就得换 vertical-align 或 Flex，硬套一种写法只会反复踩坑。
