margin: 0 auto对button无效，因其默认为inline-block，须先设display: block并指定明确宽度；父容器不能是flex/grid，且按钮不能脱离文档流（如position: absolute或float）。
按钮在父容器中居中，不是加个 text-align: center 就完事——它可能根本不动，或者动了但你没意识到是文字在动、不是按钮本身。
为什么 margin: 0 auto 对 button 没反应？
因为 button 默认是 display: inline-block，不满足 margin: 0 auto 的前提：必须是块级元素且在普通流中。
- 要生效，得先加
display: block，再设明确宽度（如width: 120px或width: fit-content） - 父容器不能是
display: flex或display: grid，否则会静默覆盖margin: 0 auto - 如果按钮被 JS 动态加上了
position: absolute或float，也会失效
display: flex + justify-content: center 怎么配才真居中？
这是现代项目最省心的方案，但容易漏掉关键条件：
- 必须写在按钮的直接父容器上，不是按钮自己
- 只加
justify-content: center只能水平居中；要垂直居中，还得加align-items: center - 父容器必须有明确高度（如
min-height: 100vh或height: 200px），否则align-items没参照系 - 按钮本身不用改
display、不用设宽高，哪怕它是
用 text-align: center 居中时，哪些地方会悄悄失效？
它只对行内级内容起作用，所以适用场景很窄：
- 必须写在按钮的父容器上，比如
- 仅控制水平方向；垂直位置靠父容器的
line-height、padding或vertical-align调整 - 一旦父容器用了
display: flex、display: grid，或自身是inline类型且没设宽度，text-align就会被忽略 - 千万别给
button自己加text-align: center——那是居中按钮里的文字，不是按钮盒子
最容易被忽略的是上下文：按钮是不是嵌套在另一个 Flex 容器里？父容器有没有高度？它的 display 是否被 JS 或框架动态覆盖？这些细节一错，所有居中规则都会静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
