本文详解为何 justify-items: center 在嵌套结构中失效，并提供基于 Flexbox 的可靠居中方案，通过为每个图片容器启用 display: flex 配合 align-items 和 justify-content 实现图片与标题的垂直水平居中。
本文详解为何 `justify-items: center` 在嵌套结构中失效，并提供基于 flexbox 的可靠居中方案，通过为每个图片容器启用 `display: flex` 配合 `align-items` 和 `justify-content` 实现图片与标题的垂直水平居中。
在 CSS Grid 布局中，仅对网格容器设置 justify-items: center 并不能自动居中其子元素内部的内容（如 <img> 和 <h3></h3>），因为 justify-items 作用于网格项（grid items）本身的位置对齐，而非网格项内部的子内容。在你的 HTML 结构中，.img-1 到 .img-4 是 grid 容器 .image-container 的四个网格项；而 <img> 和 <h3></h3> 是这些网格项内部的普通流内元素，它们不受父级 grid 的 justify-items 控制。
因此，真正需要居中的不是网格项（.img-1 等），而是每个网格项内部的图片与标题组合。解决方案是：将每个 .img-* 容器自身设为 Flex 容器，使其子元素（标题 + 图片）可被统一居中：
.img-1,
.img-2,
.img-3,
.img-4 {
margin: 1%;
background-color: #c4a77d;
opacity: 0.75;
/* 关键：启用 Flex 布局 */
display: flex;
flex-direction: column; /* 垂直排列：标题在上，图片在下 */
align-items: center; /* 水平居中所有子元素（h3 & img） */
justify-content: center; /* （可选）若需额外垂直居中整个内容块，可保留 */
/* 注意：此处不用 align-content，它仅对多行 flex 容器生效 */
}
同时，请移除无效或冗余声明：
- 删除
.services img { justify-items: center; }——justify-items对非 grid/flex 容器无意义； - 删除
.img-* { align-content: center; }—— 单行 flex 容器中align-content不起作用； - 确保图片宽度适配（如保持
width: 90%）且不破坏布局。
✅ 最终效果：每个 .img-* 区域内，<h3></h3> 和 <img> 均严格水平居中，视觉整齐统一，兼容性强，无需依赖 CSS Grid 的复杂嵌套对齐。
? 小贴士：若未来需响应式调整（例如移动端单列），可在媒体查询中将 .image-container 的 grid-template-areas 改为 'img-1' 'img-2' 'img-3' 'img-4'，Flex 居中逻辑依然有效，确保一致性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
