按钮居中需根据布局模式选择方法：inline-block按钮用父容器text-align:center；块级按钮用margin:0 auto（需设width）；flex布局用justify-content:center；绝对定位按钮用transform:translate(-50%,-50%)。
按钮居中不是加个 text-align: center 就完事——它可能根本不动，或者动了但你没意识到是文字在动、不是按钮本身。
button 元素默认是 inline-block，margin: 0 auto 无效
很多人直接给 <button> 写 margin: 0 auto，结果毫无反应。原因很实在：button 默认是 display: inline-block，不满足 margin: 0 auto 的前提：必须是块级元素且在普通流中。
- 想用
margin: 0 auto，得先强制改成块级：display: block，再设宽度（比如width: 200px） - 如果父容器是
display: flex或display: grid，margin: 0 auto会被静默忽略，不管有没有display: block - 别在
button上写text-align: center——它只对内部文字起作用，不影响按钮自身位置
text-align: center 只管父容器里的“行内内容”
这个属性必须写在按钮的**父容器**上，而且它真正居中的不是按钮盒子，而是按钮作为行内级元素所占据的“文本行”。
- 适用场景：
<div style="text-align: center"><button>提交</button></div>—— 这样能水平居中 - 失效条件：父容器用了
display: flex；或按钮被设了float/position: absolute；或父容器本身是inline或inline-block且没设宽度 - 注意：它不控制垂直方向，按钮上下位置仍由
line-height、padding或父容器高度决定
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 上下文后，所有直系子元素（包括其他按钮、文字、图片）都会变成 Flex 项目，
float、vertical-align、甚至部分margin行为会失效 - 如果按钮是多个并排，
justify-content: center会让它们整体居中，而不是每个按钮单独居中
绝对定位 + transform 适合脱离文档流的按钮
当你把按钮设成 position: absolute（比如悬浮操作按钮、固定底部按钮），就不能靠 text-align 或 margin 居中了，必须用定位方案。
- 核心三步：
position: absolute+top: 50%+left: 50%+transform: translate(-50%, -50%) - 父容器必须有定位上下文（如
position: relative），否则top/left: 50%会相对于视口计算，滚动时偏移 - 这个方案不依赖按钮宽高，适合动态内容或未知尺寸的按钮
- 旧版 Safari（iOS 9.3 之前）需要加
-webkit-transform前缀
真正容易被忽略的是：按钮是否还在文档流里——它决定了你该用 margin、text-align 还是 position。先看它的 display 值和父容器的布局模式，再选方法，比试错快得多。
