超链接在grid单元格中不居中，需对单元格设置flex布局并用justify-content和align-items居中，或使用place-items/place-self；直接给a标签设text-align无效，因其为行内元素。
超链接在 grid 单元格里不居中？先确认 display 类型
直接给 <a> 加 text-align: center 没用——因为 <a> 默认是行内元素，text-align 只对它的父容器生效，不是它自己。真正起作用的是父容器（即 grid 单元格）的对齐设置。
常见错误现象：<div style="display: grid;"><div><a href="#">点我</a></div></div> 中，链接始终靠左，即使给 <a> 加了 margin: 0 auto 也无效。
- grid 单元格默认是
display: block容器，但内容（<a>）仍是行内级，所以需控制单元格本身的对齐行为 - 如果单元格用了
display: contents或被设为inline-grid，justify-content可能失效，要检查 computed styles - 不要给
<a>设width: 100%后再加text-align: center——这会破坏语义，且在 flex/grid 父级下可能触发意外换行
用 justify-content + align-items 居中单个链接最稳
只要 grid 单元格本身是标准块级上下文（默认就是），直接在该单元格上设 display: flex 是最可控的方式，比依赖 text-align 更可靠。
示例写法：
立即学习“前端免费学习笔记（深入）”；
<div style="display: grid; grid-template-columns: 1fr 1fr;">
<div style="display: flex; justify-content: center; align-items: center;">
<a href="#">操作</a>
</div>
<div style="display: flex; justify-content: center; align-items: center;">
<a href="#">删除</a>
</div>
</div>
- 不需要给
<a>加任何样式，也不用设宽高 - 支持多行文本链接（比如带换行符的
<a>编辑<br>详情</a>），align-items: center仍有效 - 若单元格已有 padding，flex 方式不会和 padding 冲突；而
text-align在有 padding 时可能视觉偏移
整列超链接统一居中，用 grid-area + place-items 更省事
如果一整列都是操作链接（如“编辑”“删除”“查看”），与其每个单元格重复写 flex，不如用 place-items 一次性控制。
关键点：必须把该列单元格显式声明为 grid 子项（不能靠隐式网格线），否则 place-items 不生效。
- 给包裹所有行的 grid 容器设
place-items: center;→ 所有子项（包括含链接的单元格）都会居中 - 更精细控制：用
grid-column: 2;给目标列单元格加类，再单独设place-self: center; - 注意兼容性：
place-itemsIE 完全不支持，IE11 需回退到justify-content: center; align-items: center;+display: flex
为什么 text-align: center 在 grid 单元格里有时“看起来”有效？
那是因为你误把单元格当成了普通 <div>，而它实际是 grid item，默认 justify-self: stretch。此时 text-align: center 能让内部行内内容居中，但前提是：
- 单元格没设
width或min-width，让它自然撑开（否则文字会在窄空间里居中，视觉上还是偏左） -
<a>没被设成display: block或inline-block——一旦变成块级，text-align就不管用了 - 父 grid 容器没启用
align-items: start这类覆盖项，否则垂直方向会失效
这种“碰巧有效”的方式难以复现、调试困难，尤其在响应式断点切换后容易突然错位。真要省代码，宁可用 place-self: center;，它明确、可预测、不依赖渲染顺序。
