通过设置 display: flex 与 align-items: center 可实现图片在容器中垂直居中，需确保父容器有明确高度，图片作为 Flex 子项自动参与布局，配合 max-height: 100% 和 object-fit: contain 防止溢出并保持比例，若需横向滚动可添加 overflow-x: auto 与 gap 控制间距，适用于图片列表、轮播图等场景。
在使用 CSS Flexbox 布局时，让图片列表中的每一张图片在容器中垂直居中是一个常见需求。通过 align-items: center 与 Flex 容器的结合，可以轻松实现这一效果。
1. 设置容器为 Flex 布局
要让图片在容器中垂直居中，首先需要将父容器设置为 Flex 容器。这样才可以使用 Flexbox 提供的对齐属性。
示例代码：.image-list {
display: flex;
align-items: center;
height: 300px; /* 必须有明确高度或由上下文决定 */
}
其中 display: flex 启用 Flex 布局，align-items: center 控制交叉轴（默认是垂直方向）上的对齐方式，使子元素（即图片）垂直居中。
2. 图片作为 Flex 子项自动参与布局
Flex 容器内的直接子元素会自动成为 Flex 项目。只要图片是 .image-list 的子元素，就能受 align-items 影响。
立即学习“前端免费学习笔记（深入）”；
HTML 结构示例：<div class="image-list"> <img src="image1.jpg" alt="图片1"> <img src="image2.jpg" alt="图片2"> <img src="image3.jpg" alt="图片3"> </div>
此时所有图片会在容器中沿主轴（水平方向）排列，并在垂直方向上居中对齐。
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
3. 注意事项与常见问题
为了确保垂直居中生效，需注意以下几点：
- 父容器必须有明确的高度，否则 align-items: center 无法计算居中位置
- 如果图片希望等高或控制间距，可配合 justify-content 或 gap 使用
- 若图片超出容器，建议设置
max-height: 100%防止溢出
增强样式建议：
.image-list img {
max-height: 100%;
object-fit: contain; /* 保持比例且完整显示 */
}
4. 横向滚动图片列表的垂直居中
如果图片数量多，希望横向滚动并保持垂直居中，可结合 overflow-x: auto 与 Flex 布局。
.image-list {
display: flex;
align-items: center;
height: 200px;
overflow-x: auto;
gap: 10px;
padding: 10px;
}
这种布局常用于移动端图片轮播或商品缩略图展示，所有图片在垂直方向居中，水平方向可滑动浏览。
基本上就这些。使用 align-items: center 是 Flexbox 中最简洁高效的垂直居中方法，特别适合图片列表这类场景，无需额外定位或 JavaScript，结构清晰，维护方便。
