按钮居中失效的根本原因是方案与容器类型、按钮display属性及内容结构不匹配；需据场景选text-align（水平）、flex（双轴）、grid（单按钮）等对应方案。
按钮在容器里不居中，不是“没写居中代码”，而是你用的方案和当前容器类型、按钮自身 display 类型、是否含图标/多行文本不匹配——直接套 margin: 0 auto 或 text-align: center 很可能无效。
为什么 margin: 0 auto 常常失效
它只对块级元素生效，而 <button> 默认是 inline-block。即使加了 margin: 0 auto，浏览器也当它是行内内容处理，忽略左右 margin。
- 必须先设
display: block或display: inline-block（后者需配合text-align: center在父容器上） - 还得有明确宽度：比如
width: fit-content、width: 120px，否则auto没计算基准 - 父容器不能是
display: inline或未设宽高，否则按钮撑不满、视觉上仍偏左
text-align: center 只管水平，不管垂直
这是最轻量的水平居中法，但仅作用于父容器，让所有行内级子元素（包括默认 inline-block 的按钮）水平居中。
- 父容器必须是块级（如
<div>），且未设float或position: absolute - 按钮本身无需改
display，但若想垂直居中，得额外加padding-top、line-height或改父容器为flex - 如果按钮里有图标+文字，
text-align: center只居中文字，图标可能因vertical-align偏移——这不是 bug，是行内流固有行为
Flexbox 是现代项目中最稳的双轴居中方案
只要父容器有明确高度（比如 min-height: 200px 或 height: 100vh），display: flex + justify-content: center + align-items: center 就能一步到位。
立即学习“前端免费学习笔记（深入）”；
- 按钮本身保持默认
inline-block或改display: block都行，flex 会自动归一化对齐逻辑 - 如果父容器是
<body>，记得先设html, body { height: 100%; margin: 0; }，否则align-items: center没参照 - 多个按钮并排时，用
gap: 8px控制间距，比margin更干净；避免同时用text-align: center，它可能干扰主轴对齐
Grid 的 place-items: center 更适合单按钮场景
当容器只放一个按钮（如登录页中央操作区），display: grid + place-items: center 代码最少、语义最直白。
-
place-items: center等价于justify-items: center+align-items: center，但只影响直接子元素 - 不需要父容器有高度——Grid 自动建立网格轨道，哪怕内容空也能居中
- 如果后续要加标题或提示文字，建议改用
grid-template-areas显式分区，别硬塞进同一个单元格，否则对齐容易失控
真正麻烦的不是“怎么居中”，而是按钮里混了图标、多行文字、动态内容，或父容器是 <td>、<label> 这类有默认样式约束的元素——这时候再套通用居中方案，大概率踩坑。先看清楚容器上下文，再选对方法。
