按钮居中需根据容器类型和兼容性要求选择方案：margin: 0 auto 要求 button 为块级、定宽、不脱离文档流；flex 布局最简捷，父容器设 display: flex、justify-content: center 及 align-items: center（需有高度）；text-align: center 仅适用于水平居中且 button 保持 inline-block 的场景。

按钮居中不是“选一个 CSS 属性就行”的事，得看它在什么容器里、要不要垂直居中、是否要兼容老浏览器。直接给 button 加 margin: 0 auto 却没效果？八成是漏了关键条件。

button用margin: 0 auto居中失败的常见原因

这个方法只对块级、定宽、不脱离文档流的 button 生效。但默认 button 是 inline-block，所以必须显式转成块级：

• 必须加 display: block（或 display: inline-block 配合父容器 text-align: center）
• 必须设明确宽度，比如 width: 120px；width: 100% 或没设宽度，margin: 0 auto 就不生效
• 父容器不能是 display: flex 或 display: grid，否则会覆盖 auto 行为
• 别在 button 上写 float 或 position: absolute，否则脱离文档流，margin: 0 auto 失效

用display: flex实现水平+垂直居中

这是现代项目最省心的方案，父容器一行声明就能搞定，且不依赖子元素尺寸：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 给 button 的**直接父容器**加 display: flex、justify-content: center（水平居中）
• 若还需垂直居中，再加 align-items: center —— 但注意：父容器得有高度，比如 min-height: 100vh 或 height: 300px，否则 align-items 没表现空间
• button 本身不用改 display、不用设宽高，哪怕它是 img 或多个并排元素也照常居中
• 副作用：父容器变成 Flex 容器后，子元素的 float、vertical-align 和传统 margin 对齐会失效

用text-align: center快速水平居中

适合按钮保持默认 inline-block 特性、且只需水平居中的场景，代码最少、兼容性最好：

• 给 button 的父容器（如 <div>）加 <code>text-align: center
• button 不用额外样式，默认就是 inline-block，能响应 text-align
• 只管水平方向；垂直方向靠父容器 line-height 或 padding 调整，单行文本可用 vertical-align: middle
• 千万别给 button 自己加 text-align: center——那是控制按钮内文字，不是按钮位置

真正容易被忽略的是上下文：按钮是不是嵌套在另一个 Flex/Grid 容器里？父容器有没有高度？button 是不是被 JS 动态加了 position: absolute？这些细节一错，所有居中规则都会静默失效。