justify-content: center 是水平排列按钮的正确选择，它控制网格轨道在容器内的水平位置，适配多子项居中；place-items 和 place-content 易误用，父容器必须设 display: grid 才生效。
place-items: center 能同时搞定水平和垂直居中，但只对 Grid 直接子元素生效；若只要水平排列（不垂直居中），用 justify-content: center 更精准。
父容器必须设 display: grid，否则所有居中属性都无效
这是最常被忽略的前提。哪怕你写了 place-items: center 或 justify-content: center，只要父元素没声明 display: grid 或 display: inline-grid，浏览器就当它不存在。
- React/Vue 中尤其容易踩坑：Fragment、
<div>包裹、asChild 模式会让目标按钮变成“孙元素”，place-items完全不作用于它 - 检查开发者工具的 computed styles，确认父元素的
display确实是grid - 不需要定义
grid-template-columns或grid-template-rows，空 grid 容器也能用justify-content
justify-content: center 是水平排列按钮的正确选择
如果你只是想让一排按钮在容器内水平居中（比如三个 <button> 并排居中显示），justify-content: center 就够了——它控制的是网格轨道（columns）在容器内的水平位置，天然适配多子项水平排列场景。
- 不要误用
place-items: center：它会让每个按钮自身在各自单元格里居中，但按钮之间仍按默认顺序紧挨着左对齐，视觉上还是“靠左一排”，不是“整排居中” - 也不要用
place-content: center：它只在容器尺寸 > 网格轨道总宽时才生效，比如你设了grid-template-columns: 100px 100px 100px但容器宽 500px，才有空间可居中；纯内容自适应布局下它大概率不触发 - 示例写法：
.btn-container { display: grid; justify-content: center; gap: 8px; } .btn-container button { padding: 8px 16px; }
按钮本身别加 margin: auto 或 align-self
Grid 中对齐逻辑是“容器驱动”，子项自己乱加对齐属性反而会干扰整体效果。
立即学习“前端免费学习笔记（深入）”；
-
margin: auto在 Grid 里只在特定条件下生效（比如轨道尺寸为auto或fit-content），不可靠，且对水平排列无意义 -
align-self: center是垂直方向控制，和水平排列无关；加了还可能让按钮在高度上“浮起来”，破坏基线对齐 - 如果按钮需要响应式换行（比如小屏竖排），改用
grid-auto-flow: row+justify-content: center，而不是靠子项 margin 调
真正容易被忽略的是：Grid 的 justify-content 不依赖子项数量或宽度，但它依赖父容器有可用宽度空间——如果父容器是 inline-grid 且内容极窄，或被 flex 压缩到最小宽度，那“居中”就失去参照。这时候加 min-width: max-content 或显式 width 比反复调 justify-content 更有效。
