grid-template-areas 本身不控制内容居中，需用 justify-items 和 align-items（或 place-items）设置容器级对齐；单个格子可用 justify-self/align-self 覆盖；替换元素偏移需处理 vertical-align 或 display。
grid-template-areas 里内容不居中？先看 justify-items 和 align-items
网格容器默认不自动居中子项，哪怕用了命名区域。真正控制“每个格子内部内容怎么放”的是容器级对齐属性，不是 grid-area 本身。
-
justify-items控制**行内方向**（左/右）对齐：可设为start、center、end、stretch -
align-items控制**块方向**（上/下）对齐：值同上，二者常成对出现 - 如果只希望某一个格子特殊处理，得在对应子元素上用
justify-self/align-self覆盖 - 注意：
stretch是默认值，它会让内容撑满格子——看起来像“填满”，但不是“居中”
用 place-items: center 一行搞定居中，但别滥用
place-items 是 align-items + justify-items 的简写，设成 center 确实能让所有子项在各自网格区域内居中。
- 适用场景：整个网格布局风格统一，所有格子都希望内容居中（比如图标卡片、按钮组）
- 风险点：一旦某个子项需要靠左或顶部对齐（如带标题的面板），就得单独加
justify-self: start覆盖，维护成本上升 - 兼容性没问题，现代浏览器全支持；但 IE 完全不认，如果还要兼容 IE，只能拆成两个属性写
内容“填充格子”和“居中显示”是两回事
很多人混淆“让内容占满整个网格区域”和“让内容在区域内水平垂直居中”。前者靠尺寸控制，后者靠对齐控制。
- 想填充：给子元素设
width: 100%; height: 100%，或用stretch（默认行为） - 想居中：必须显式设置
justify-items: center+align-items: center，或者用place-items - 常见错误：
text-align: center只影响行内内容水平对齐，对块级子元素无效；margin: auto在 Grid 里也不起作用，除非该子项被设为justify-self: stretch后又手动收缩
Grid 中图片/按钮等替换元素居中偏移？检查 vertical-align 和基线
当格子里放的是 这类替换元素时，即使设置了 place-items: center，也可能看起来“偏下”。这是基线对齐惹的祸。
- 原因：替换元素默认按基线（baseline）对齐，而基线在图片底部留有间隙，视觉上就像没居中
- 解法一：给图片加
vertical-align: middle（仅对 inline/inline-block 有效） - 解法二：更可靠——把图片设为
display: block，再配合place-items，彻底脱离基线逻辑 - 顺带提醒：
align-items: center对 flex 容器里的图片也存在同样问题，不是 Grid 特有
事情说清了就结束。真正难的不是记住哪几个属性，而是每次写 Grid 时，下意识分清“容器对齐”和“子项自身尺寸/显示模式”的责任边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
