Flex布局中图片对齐由父容器控制：水平居中用justify-content:center，垂直居中用align-items:center（需父容器有高度），图片自身无需设display:block或对齐属性。
图片在 Flex 布局中本身不设对齐属性，对齐由其**父容器**控制。关键不是改图片，而是配置好 Flex 容器的主轴和交叉轴行为。
水平居中（主轴对齐）
当父容器是 display: flex 且主轴为默认的水平方向（flex-direction: row）时，用：
- justify-content: center —— 所有子项（含图片）整体水平居中
- justify-content: flex-start / flex-end —— 靠左或靠右对齐
- margin-left: auto —— 单独推某张图片到最右侧（无需改其他子项）
垂直居中（交叉轴对齐）
垂直方向是否居中，取决于 align-items（作用于所有子项）或 align-self（单独作用于某张图片）：
- align-items: center —— 父容器内所有图片和文字统一垂直居中
- align-self: flex-start 写在图片上 —— 单独让这张图顶部对齐，其余保持 center
- 注意：若父容器没设高度，
align-items: center可能无效果
图片自身不需要 display: block
Flex 项目会自动忽略原本的行内/块级特性，所以图片可保持默认 display: inline，也不用加 width 或 margin: auto。强行设 display: block 不影响对齐，但属于冗余操作。
立即学习“前端免费学习笔记（深入）”；
避免常见错误
- 给图片本身写
justify-content—— 这个属性只对display: flex的父元素生效 - 忘了设父容器
display: flex—— 其他 Flex 属性全部无效 - 用
vertical-align混合 Flex 布局 —— 它在 Flex 容器里基本不起作用 - 误以为
align-items: center能让图片“上下居中”而忽略父容器高度限制
