place-content不能居中模态框，因其仅控制多行/列轨道组在容器内的对齐；模态框通常单子项且无显式多轨，故无效；应改用place-items: center（父设display: grid）或position: fixed+transform降级。
place-content 不是用来居中模态框的——它控制的是整个网格轨道（rows/columns）在容器内的对齐，不是子元素本身的位置。想靠它把 .modal-content 居中，基本会失败。
place-content: center 为什么对模态框无效
place-content 只在容器内有多行或多列轨道、且这些轨道总尺寸小于容器尺寸时才起作用。
比如你写了 grid-template-rows: 100px 100px，但容器高 300px，那剩余 100px 空间就是“轨道外区域”，place-content 才能生效。
- 模态框通常只有一个子元素，父容器也往往没定义
grid-template-rows或grid-template-columns - 此时 Grid 实际只有 1 行 1 列，
place-content完全不触发 - 即使强行加了
repeat(3, 1fr)，也只是把空白分给轨道，而不是把内容推到中间
常见错误现象：
- 写了
place-content: center但模态框纹丝不动 - 检查 computed styles 发现
place-content值根本没被应用（浏览器标记为 inactive）
真正该用哪个属性来居中模态框
必须用作用于子项对齐盒（alignment box） 的属性：
-
place-items: center：最直接，等价于justify-items: center+align-items: center - 或单独写
justify-self: center; align-self: center在模态框自身上（更精准，不影响其他子项）
关键前提：
立即学习“前端免费学习笔记（深入）”；
- 父容器必须有
display: grid（哪怕只有一行一列） - 模态框必须是它的直接子元素，不能被额外包裹一层
div - 避免给模态框设
position: absolute或float，否则它就不再是 grid item
示例结构：
.modal-overlay {
position: fixed;
inset: 0;
display: grid;
place-items: center;
background: rgba(0,0,0,0.5);
z-index: 1000;
}
.modal-content {
width: 90%;
max-width: 500px;
background: white;
border-radius: 8px;
}兼容性差的场景下怎么降级
place-items 在 IE 中完全不支持，Safari 10.1+ 才开始支持。如果项目要兼容旧版 Safari 或需支持 iOS 10 以下设备：
- 改用
position: fixed+top: 50%+left: 50%+transform: translate(-50%, -50%) - 注意：必须确保父容器（通常是
.modal-overlay）有position: relative或干脆不用父容器，直接对body做 fixed 定位 - 别用
margin-top: -Xpx，因为模态框宽高常是max-width或fit-content，无法预知具体像素值
容易被忽略的一点：移动端 Safari 在软键盘弹出时会压缩视口高度，导致 100vh 失效。这时候即使 place-items 正常工作，遮罩层也会“上浮”。解决方案是放弃 vh，改用 min-height: 100dvh（2026 年已广泛支持）或 JS 动态监听视口变化。
