justify-items 和 align-items 未生效的主因是作用范围与前提条件被忽略：二者仅对未显式设置 justify-self 或 align-self 的子项生效；按钮若设了 justify-self: start，则容器级 justify-items: center 失效；align-items 对齐的是单元格 block-start 边界，非内容盒中心，受 padding、line-height 影响导致视觉偏移；place-items: center 需配合父容器明确高度（如 min-height）及子项 min-width/min-height 防溢出；多按钮等宽换行应使用 grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) 而非硬编码列数；单个按钮右对齐应使用 justify-self: end + align-self: center；grid 对齐是容器、项目默认、单个项目三层叠加，缺一不可。
justify-items 和 align-items 设了但按钮还是不居中？
不是属性没生效，而是你可能忽略了它的作用范围和前提条件。这两个属性只对“没显式设置 justify-self 或 align-self”的子项起作用；一旦某个按钮写了 justify-self: start，容器级的 justify-items: center 就完全失效。
常见错误现象：
- 按钮明明加了
justify-items: center，却还贴左——检查是否误给按钮加了justify-self - 垂直方向偏高或偏低——
align-items对齐的是单元格的 block-start 边界，不是内容盒中心；如果按钮本身有padding或line-height，视觉上就会“看起来没居中” - 按钮宽高固定（如
width: 120px），而justify-items: stretch（默认值）被阻断，导致无法撑满单元格，进而影响对齐基准
place-items: center 为什么有时不起作用？
place-items: center 是 justify-items: center 和 align-items: center 的简写，但它不解决尺寸溢出问题。如果按钮内容过长、图片未约束宽高，或者父容器没设 min-height，它就只是“试图居中”，结果可能是裁剪、换行或撑破布局。
必须配合：
- 父容器要有明确高度（比如
min-height: 60px），否则align-items: center在无高度上下文中无意义 - 按钮自身加
min-width: 0和min-height: 0，防止内部 flex 或图片默认不收缩导致溢出 - 避免同时用
gap和子项margin：比如gap: 8px+button { margin: 4px }，实际间距会变成 16px
多个按钮要等宽+自动换行，别手写 1fr 1fr 1fr
硬编码列数（如 grid-template-columns: 1fr 1fr 1fr）在按钮数量变化时立刻失效。响应式场景下，应该用轨道函数动态生成列。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
推荐写法：
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))
说明：
-
auto-fit会收缩空轨道，auto-fill则保留空白列，容易出现“最后一行只剩一个按钮还带大片空白”的情况 -
minmax(120px, 1fr)表示每个按钮至少 120px 宽，空间够就均分，不够就换行 - 按钮本身不要设
width，靠minmax()和gap控制尺寸与间距 - 文字长度差异大时，加
white-space: nowrap防止意外折行破坏宽度一致性
单个按钮要右对齐，别动容器
整个按钮组水平居中，但其中一个“删除”按钮想靠右？这时候改容器的 justify-items 是错的——它会影响所有按钮。
正确做法是单独控制那个按钮：
- 给它加
justify-self: end（水平右对齐） - 如果还要垂直居中，再加
align-self: center - 注意：
justify-self和align-self优先级高于容器级设置，且只作用于该元素本身 - 如果按钮跨多格（如
grid-column: 1 / -1），对齐基准是它所占整个网格区域的中心，不是内容盒中心；调试时临时加outline: 1px solid red能立刻看清实际占位
真正麻烦的不是写错一行 CSS，而是没意识到 Grid 对齐是三层作用域叠加的结果：容器整体位置（justify-content/align-content）、项目默认对齐（justify-items/align-items）、单个项目覆盖（justify-self/align-self）。漏掉任何一层，都可能让“居中”变成玄学。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
