子元素需设置align-self和justify-self才能独立对齐；二者覆盖容器级align-items/justify-items，仅作用于单个网格项，且受margin:auto冲突、IE11兼容性及轨道定位影响。

子元素设置 align-self 和 justify-self 才能独立对齐

Grid 容器的 align-items / justify-items 只影响所有子项的默认对齐方式，真正让某个子元素“脱群”对齐，必须在该子元素自身上设置 align-self（垂直方向）和 justify-self（水平方向）。这两个属性会覆盖容器级设置，且仅作用于单个网格项。

常见错误是只改容器属性，结果所有子项一起动，根本达不到“某个按钮右对齐、某个图标居中”的需求。

• align-self 可取值：start、end、center、stretch（默认）、self-start 等，作用于行内轴（即 grid row 方向）
• justify-self 可取值同上，作用于行外轴（即 grid column 方向）
• 若子元素是嵌套的 Grid 容器（比如内部又用了 display: grid），它的对齐行为由其父级 grid 的 align-self/justify-self 控制，它自身的 align-items 不会影响它在父 grid 中的位置

嵌套 Grid 中，父容器的 place-items 不会穿透影响子容器内部

很多人误以为给外层 grid 设置 place-items: center，里面的子 grid 就会自动把它的子项也居中——不会。外层的 place-items（等价于 align-items + justify-items）只决定“这个子 grid 元素本身”在父容器中的位置，而不是它内部的内容。

也就是说：外层控制的是「子容器这个盒子」的对齐；子容器内部如何排布，得靠它自己设 place-items 或给它的子项设 align-self/justify-self。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

立即学习“前端免费学习笔记（深入）”；

• 外层 grid 里一个 <div class="inner-grid">，想让它在父中居中？加 <code>align-self: center; justify-self: center; 到 .inner-grid
• 但 .inner-grid 里面的按钮要右对齐？得在按钮上写 justify-self: end;，或在 .inner-grid 上设 justify-items: end;
• 注意：如果 .inner-grid 高度为 auto，align-self: center 可能无视觉效果——需确保父轨道有明确高度（如 grid-template-rows: 100px;）或设 align-content: center（针对多行轨道）

避免 margin: auto 和 self 属性混用导致冲突

在 grid 项上同时用 margin: auto 和 align-self/justify-self 是危险操作。CSS 规范规定：当某轴方向上存在 auto margin 时，对应的 *-self 值会被忽略（即使显式写了 justify-self: end，也无效）。

• 想靠 justify-self 水平右对齐？就别给该元素设 margin-left: auto
• 想用 margin: auto 居中？那就别依赖 justify-self，且要确认该元素所在轨道没被其他项撑满（否则 auto margin 无法生效）
• 调试技巧：在 DevTools 中检查 computed 样式，看 justify-self 是否显示为 unset 或被 strike-through —— 很可能就是 margin 在捣鬼

IE11 兼容场景下 align-self 行为不一致

IE11 的 Grid 实现（基于旧版草案）不支持 align-self 和 justify-self，只认 -ms-grid-row-align 和 ms-grid-column-align，而且它们只能用于直接子项，不能继承或穿透嵌套。

• 如果必须兼容 IE11，嵌套 grid 中的独立对齐需退回到 Flexbox 布局，或用绝对定位 + transform: translate()
• 现代项目建议用 @supports (display: grid) 包裹 grid 相关样式，把 IE11 逻辑单独写在外部
• 注意：Safari 10–11.1 对 justify-self 支持不全，某些值（如 self-end）可能失效，优先用 start/end/center
实际布局中，最易被忽略的是：**子元素是否真的处于一个明确的 grid 轨道内**。如果父容器用了 grid-template-areas 却没给该子元素分配 grid-area，或者用了 grid-auto-flow: column 导致隐式轨道生成，align-self 可能表现异常——先确认 grid-row / grid-column 是否按预期落位。