place-items: center 是 grid 布局中实现子元素水平垂直居中的最简方案，等价于 justify-items: center 和 align-items: center，但要求父容器设 display: grid 且有明确高度（如 min-height），否则无效。
grid布局中让水平垂直居中只需place-items: center
现代浏览器下，place-items: center 是最简方案——它等价于同时设置 justify-items: center 和 align-items: center，对 <a></a> 这类子元素直接生效，无需额外设宽高或 display 类型。
常见错误是只写 justify-content: center，结果链接只水平居中、垂直方向仍贴顶；或者给 <a></a> 自身加 margin: 0 auto，但 grid 容器里这属性完全无效。
- 父容器必须声明
display: grid，否则place-items不起作用 - 若父容器高度未定义（比如仅靠内容撑开），
align-items: center会“没空间可居中”，需加min-height或显式height -
<a></a>可以是纯文本、带<img>、甚至内嵌<span></span>，都不影响居中效果
<div style="display: grid; place-items: center; min-height: 200px; border: 1px solid https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15beee;"> <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">立即下载</a> </div>
当需要多个在网格中各自居中时用justify-content/align-content
如果父容器里有多个 <a></a>，且你想让它们整体在网格区域内水平垂直居中（而不是每个都单独居中），就要换用 justify-content 和 align-content，并确保网格至少有一行一列的轨道。
典型误操作是漏写 grid-template-rows 或 grid-template-columns，导致容器变成单格隐式网格，align-content 就失效了。
- 用
grid-template-rows: 1fr+grid-template-columns: 1fr显式创建单单元格网格，再配justify-content: center和align-content: center - 若想让多个链接横向并排居中，改用
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))+justify-content: center -
align-content只在多行/多列网格中起作用；单行网格请用align-items
<div style="display: grid; grid-template-rows: 1fr; grid-template-columns: 1fr; justify-content: center; align-content: center; min-height: 200px;"> <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">首页</a> <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">关于</a> <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">联系</a> </div>
避免被网格轨道拉伸变形
默认情况下，<a></a> 在 grid 单元格中会拉伸填满整个轨道，文字可能被意外换行或溢出。这不是居中失败，而是尺寸失控。
根本原因在于 <a></a> 是 inline 元素，而 grid 会按块级方式分配空间，容易触发不预期的盒模型行为。
- 加
justify-self: center和align-self: center到<a></a>自身，比依赖父容器更精准 - 显式限制宽度：给
<a></a>加max-width: 200px或width: fit-content防止撑开 - 禁用换行：
white-space: nowrap对纯文字链接很有效；配合overflow: hidden; text-overflow: ellipsis更稳妥
兼容性与降级处理要点
place-items 在 Safari 10.1+、Chrome 57+、Firefox 45+ 支持良好，但 IE 完全不支持。若项目还需兼容 IE11，不能只靠 grid 居中。
别指望用 @supports 检测后 fallback 到 flex —— 很多旧项目里 grid 和 flex 的父容器结构不同，样式层叠容易冲突。
- 真正可靠的降级是：先用
text-align: center+line-height处理水平+单行垂直居中，再用display: grid覆盖现代浏览器 - 若父容器已有
display: table-cell等老方案，grid 声明会直接覆盖，无需额外清除 - 移动端要注意：iOS Safari 对
place-items在min-height: 100vh容器中偶有计算偏差，加height: 100%双保险
最易被忽略的是：网格居中依赖轨道定义和容器尺寸上下文，不是写上 place-items 就万事大吉；一旦父容器高度塌陷或网格未显式声明，视觉上就“没动”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
