按钮居中需根据上下文选择方案：块级定宽用margin:0 auto；父容器flex+justify-content/align-items最通用；text-align:center适合水平居中；绝对定位需配合transform(-50%,-50%)。
按钮居中不是加个 text-align: center 就能搞定的事——它可能根本不动，或者动了但你没意识到是文字在动、不是按钮本身。
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 实现水平 + 垂直居中
这是现代项目最省心的方案，父容器一行声明就能搞定，且不依赖子元素尺寸：
- 给
button的直接父容器加display: flex、justify-content: center（水平居中） - 若还需垂直居中，再加
align-items: center——但注意：父容器得有高度，比如min-height: 100vh或height: 300px，否则align-items没表现空间 -
button本身不用改display、不用设宽高，哪怕它是img或多个并排元素也照常居中 - 副作用：
parent变成 Flex 容器后，子元素的float、vertical-align和传统margin对齐会失效
用 text-align: center 快速水平居中
适合按钮保持默认 inline-block 特性、且只需水平居中的场景，代码最少、兼容性最好：
立即学习“前端免费学习笔记（深入）”；
- 给
button的父容器（如<div>）加text-align: center -
button不用额外样式，默认就是inline-block，能响应text-align - 只管水平方向；垂直方向靠父容器
line-height或padding调整，单行文本可用vertical-align: middle - 千万别给
button自己加text-align: center——那是控制按钮内文字，不是按钮位置
绝对定位按钮必须用 transform: translate(-50%, -50%)
当你把按钮设成 position: absolute（比如悬浮操作按钮、固定底部按钮），就不能靠 text-align 或 margin 居中了：
- 核心三步：
position: absolute+top: 50%+left: 50%+transform: translate(-50%, -50%) - 移动端需加
max-width: 90vw、max-height: 80vh防止溢出 - Android 4.3 及以下需加
-webkit-transform - 如果按钮是动态插入的（比如 JS 创建），确保定位前 DOM 已挂载，否则
getBoundingClientRect()类逻辑可能取不到正确尺寸
真正容易被忽略的是上下文：按钮是不是嵌套在另一个 Flex/Grid 容器里？父容器有没有高度？button 是不是被 JS 动态加了 position: absolute？这些细节一错，所有居中规则都会静默失效。
