按钮在<div>中居中需据场景选择方案：父容器设text-align:center最轻量；用flex需父容器display:flex+justify-content:center，且保证有高度；margin:0 auto须先设button为display:block并指定宽度。
按钮在 <div> 里居中，不是加个 text-align: center 就完事——它可能根本不动，或者动了但你没意识到是文字在动、不是按钮本身。
button 默认是 inline-block，margin: 0 auto 无效
很多人直接给 <button> 写 margin: 0 auto，结果毫无反应。原因很实在：按钮默认是 display: inline-block，不满足 margin: 0 auto 的前提——必须是块级元素且在普通流中。
- 想用
margin: 0 auto，得先强制改成块级：display: block，再设宽度（比如width: 120px或width: fit-content） - 如果父容器是
display: flex或display: grid，margin: 0 auto会被静默忽略，不管有没有display: block - 别在
<button>上写float或position: absolute，否则脱离文档流，margin: 0 auto失效
父容器加 text-align: center 只管水平居中
这是最轻量、兼容性最好的方案，适合按钮保持默认 inline-block 特性、且只需水平居中的场景。
- 必须写在按钮的**父容器**上，例如：
<div style="text-align: center"><button>提交</button></div> - 它真正居中的不是按钮盒子，而是按钮作为行内级元素所占据的“文本行”
- 只控制水平方向；垂直方向仍由父容器的
line-height、padding或高度决定 - 千万别给
<button>自己加text-align: center——那是控制按钮内文字，不是按钮位置
display: flex 是现代项目最稳的方案
只要父容器支持 Flex（IE10+），display: flex + justify-content: center 是最直接、最不易出错的方式。
立即学习“前端免费学习笔记（深入）”；
- 水平居中单个按钮：
.parent { display: flex; justify-content: center; } - 水平+垂直居中：
.parent { display: flex; justify-content: center; align-items: center; min-height: 200px; }——注意min-height或height必须有，否则align-items: center没表现空间 - 副作用明显：父容器变成 Flex 上下文后，子元素的
float、vertical-align和部分margin行为会失效 - 按钮本身不用改
display、不用设宽高，哪怕它是<img>或多个并排元素也照常居中
真正容易被忽略的是上下文
按钮是不是嵌套在另一个 flex 或 grid 容器里？父容器有没有高度？按钮是不是被 JS 动态加了 position: absolute？这些细节一错，所有居中规则都会静默失效。尤其是 align-items: center 在父容器高度塌缩时完全不生效，而这种问题往往只在特定视口尺寸或动态内容加载后才暴露出来。
