按钮在中居中需据场景选择方案：父容器设text-align:center最轻量；用flex需父容器display:flex+justify-content:center，且保证有高度；margin:0 auto须先设button为display:block并指定宽度。

按钮在 <div> 里居中，不是加个 <code>text-align: center 就完事——它可能根本不动，或者动了但你没意识到是文字在动、不是按钮本身。

button 默认是 inline-block，margin: 0 auto 无效

很多人直接给 <button></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></button> 上写 float 或 position: absolute，否则脱离文档流，margin: 0 auto 失效

父容器加 text-align: center 只管水平居中

这是最轻量、兼容性最好的方案，适合按钮保持默认 inline-block 特性、且只需水平居中的场景。

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

• 必须写在按钮的**父容器**上，例如：<div style="text-align: center"><button>提交</button></div>
• 它真正居中的不是按钮盒子，而是按钮作为行内级元素所占据的“文本行”
• 只控制水平方向；垂直方向仍由父容器的 line-height、padding 或高度决定
• 千万别给 <button></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 在父容器高度塌缩时完全不生效，而这种问题往往只在特定视口尺寸或动态内容加载后才暴露出来。