place-items: center 是最简双向居中方案，需父容器设 display: grid 且有明确高度（如 min-height: 100vh），仅作用于直接子元素，IE 不支持。
place-items: center 是最简双向居中方案
只要父容器设为 display: grid，一行 place-items: center 就能同时搞定水平和垂直居中，不用拆开写 justify-content 和 align-items。它对图片这种替换元素天然友好，且不依赖图片自身宽高声明。
但要注意：这个属性只作用于直接子元素，如果图片套了多层 <div>，必须确保 img 是 grid 容器的直系子项；否则会失效。
- 必须加在父容器上，不是
img标签自己 - 父容器需有明确高度（比如
min-height: 300px或height: 100vh），否则垂直方向无参照，图片仍贴顶 - 避免和
float、position: absolute混用，grid 会接管子项定位逻辑
响应式图片必须配 max-width: 100% 和 height: auto
仅靠 place-items: center 不能防止图片溢出或拉伸。尤其在小屏下，原始尺寸大的图会撑破容器。真正响应式的做法是约束图片渲染行为：
-
max-width: 100%确保图片宽度不超过父容器 -
height: auto保持宽高比，避免变形 - 不要设
width: 100%或height: 100%—— 这会让图片强行填满，失去比例控制 - 若需裁剪/缩放效果，改用
object-fit: cover或contain，但要搭配显式宽高（如width: 100%; height: 200px）才生效
Grid 容器本身也要响应式定义列与行
如果目标是“图片在不同屏幕下始终居中”，光调图片不够，grid 容器结构也得适配。比如单图居中场景，常见错误是固定写 grid-template-columns: 1fr 却没处理小屏下的内边距或容器收缩。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 用
minmax(300px, 1fr)替代纯1fr，防止单列过窄 - 加
gap控制间距时，用rem或em比px更易响应 - 必要时用媒体查询重置
place-items：比如移动端改为place-items: center stretch，让图片水平居中但垂直铺满（适合 banner 图）
IE11 及更老浏览器不支持 place-items
如果你的项目仍需兼容 IE11，place-items: center 会完全失效。此时必须降级为显式写法：justify-content: center; align-items: center;，并补上 -ms- 前缀（display: -ms-grid + -ms-grid-column-align: center; -ms-grid-row-align: center;）。
但注意：IE11 的 -ms-grid 不支持 place-items 的简写语义，且 align-items 在旧版 flex/grid 中行为不稳定。真要保 IE，不如直接退回 margin: 0 auto + display: block 方案，它更可控。
现代项目里，place-items: center 的简洁性很诱人，但容易忽略图片尺寸失控和容器塌陷这两个硬伤——它们比写法本身更容易导致居中“看起来失败”。
