图片在grid容器中不居中，需确保父容器为display: grid、无其他display覆盖、图片为直接子元素且容器有明确高度；响应式下需配合max-width和object-fit控制溢出；多图网格应让每格自适应而非全局place-items。
grid容器里图片不居中？先确认place-items是否生效
多数人写place-items: center后图片仍偏左上，不是语法错，而是父容器没真正启用 Grid。它只对直接子元素起作用，且要求容器本身是display: grid（不是inline-grid或被其他 display 覆盖）。常见失效点：
- 父容器加了
float、position: absolute或display: flex→ Grid 被覆盖 - 图片外层嵌套了
<div>或<code><p></p>→ 图片不是 grid item，place-items管不到 - 容器高度塌陷（比如只设
width没设height或min-height）→ 垂直方向无参照，居中计算失败
正确最小闭环：
<div style="display: grid; place-items: center; height: 300px; width: 100%;"> @@##@@ </div>
响应式场景下图片溢出或拉伸？max-width和object-fit必须配对用
仅靠place-items: center不能防止图片撑破容器。尤其在移动端，原始尺寸大的图会突破网格格子边界。关键不是“居中”，而是“居中且可控”：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
img { max-width: 100%; height: auto; }→ 保证宽度不超格子，但高度可能过高（比如竖图） -
img { width: 100%; height: 100%; object-fit: contain; }→ 强制填满格子且保持比例，留白也居中 -
object-fit: cover适合背景图，但会裁剪；contain更安全，尤其图文混排时 - 别给
img设固定width/height→ 响应式下会被max-width覆盖，还可能触发重绘抖动
多张图片网格布局，每张都居中？别用place-items全局控制
如果容器里有 3×3 图片网格，想每张都在各自格子内居中，place-items: center会让所有图挤到整个容器中心——这是常见误用。正确做法是让每个格子成为独立居中单元：
- 给网格容器设
display: grid+grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))→ 响应式列数 - 给
img加width: 100%; height: 100%; object-fit: contain;→ 自适应格子尺寸 - 每个格子默认是 block 容器，无需额外居中样式；若格子内容复杂（带标题），再在单个格子上加
display: flex; place-items: center;
错误示例：grid-container { place-items: center; } img { width: 100%; } → 所有图叠在左上角
旧版 Safari 或 Android Webview 中place-items失效？回退到justify-content + align-items
place-items在 Safari 10.1+ 和 Chrome 57+ 支持良好，但部分 Android 6–8 的 WebView 仍需显式拆分写法。兼容性兜底不靠前缀，而靠降级：
- 优先写
place-items: center - 紧接一行写
justify-content: center; align-items: center;→ 后者在不支持place-items的环境生效，且不会覆盖前者 - 注意：必须写在同一选择器内，分开写（如一个在 CSS 文件，一个在 style 标签）可能被后加载的覆盖
最终声明形如：
.grid-cell {
display: grid;
place-items: center;
justify-content: center;
align-items: center;
} 这种写法在所有现代浏览器及大部分旧环境中都能稳定居中。
