text-align: center 在多列布局中失效，因其仅作用于行内内容，而 flex/grid 容器接管子元素对齐；margin: 0 auto 同样无效，因主轴对齐优先级更高；正确解法是 grid 用 justify-self: center，flex 用 justify-content: center 或 margin: auto（单行）。
为什么 text-align: center 在多列布局里失效
因为多列容器（如 display: grid 或 display: flex 的父容器）会接管子元素的对齐逻辑，text-align: center 只作用于行内内容，在 flex/grid 容器中被忽略。你给父容器加了 text-align: center，但按钮是直系子项，它已脱离文本流，这个属性根本不会触发居中行为。
margin: 0 auto 在多列布局中为何不响应
在 display: grid 或 display: flex 父容器下，margin: 0 auto 对直系子元素（包括 <input type="submit">）是静默失效的——Flex/Grid 的主轴对齐规则优先级高于 margin 自动计算。即使你把按钮设成 display: block 并加 width: fit-content，也无济于事。
- 别在按钮上硬写
margin: 0 auto，它不会生效 - 别试图用
float或position: relative挤出空间，会破坏多列结构 - 如果父容器是
grid，按钮默认占满所在网格单元，需显式控制其自身对齐
多列布局中按钮居中的正确姿势
取决于你用的是 Grid 还是 Flex 多列，解法完全不同：
- Grid 布局：在按钮自身加
justify-self: center，或在父容器用place-items: center（但注意这会影响所有子项） - Flex 多列（如
flex-wrap: wrap）：按钮必须是独立 flex 项目，用margin: auto仅在单行 flex 中有效；多行时改用justify-content: center控制整行居中 - 若按钮和其他字段同属一个
grid-template-columns: repeat(3, 1fr)容器，它会被分配到某列里——此时要让它在该列内居中，就得给按钮加justify-self: center
示例（Grid 场景）：
.form-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }<br>.boton { justify-self: center; }
容易被忽略的兼容性坑
IE11 不支持 justify-self，如果你仍需兼容它，得退回到包裹一层 <div> 并设 <code>text-align: center，但前提是该 div 是 grid 单元内的块级内容，且不能设 display: contents 或 grid-column 跨列——否则会破坏列结构。
另外，fit-content 在旧版 Safari 中需要 -webkit-fit-content 前缀；而 place-items 在部分 Android WebView 中解析不稳定，建议拆成 justify-items: center; align-items: center。
