align-items 不能单独让图片居中，必须配合 display: flex、justify-content 及父容器明确高度（如 min-height: 300px 或 height: 100vh）才能生效，且属性须写在父容器上而非 img 标签。
align-items 本身不能单独让图片居中
align-items 是 flex 容器的属性，只对直接子元素（即 flex items）起作用，且仅控制交叉轴方向（默认为垂直方向）的对齐。它不会自动让图片“在页面或容器里居中”，必须配合 display: flex 和 justify-content 才完整生效。
常见错误现象：align-items: center 写在 align-items 不写 justify-content → 图片水平仍靠左；父容器高度塌陷 → 垂直方向无空间可居中，图片贴顶不动。
父容器必须设 height 或 min-height 才能触发 align-items 垂直居中
flex 的 align-items: center 需要交叉轴有可用空间才能计算“中间位置”。如果父容器没设高度（比如只靠内容撑开），它的交叉轴长度为 0，align-items 就失去作用。
- 推荐用
height: 100vh实现视口级垂直居中（适合全屏图） - 响应式场景下更稳妥的是
min-height: 300px或结合媒体查询动态调整 - 避免用
height: auto或不设高度 —— 此时align-items无效 - 若父容器是
，别直接加display: flex→ 会把所有直系子元素（如）都变成 flex item，破坏结构
响应式图片自身必须保留比例，否则 align-items 会居中一个拉伸变形的图
即使 align-items 和 justify-content 都正确，图片若宽高固定或未约束，缩放时可能溢出或失真，导致“居中了但难看”。
- 务必给
max-width: 100%和height: auto - 避免同时设
width和height（除非明确需要裁剪） - 不要给图片加
position: absolute或float→ 它会脱离文档流，不再受 flex 对齐控制 - 若图片是 SVG 或图标类资源，可考虑用
object-fit: contain配合固定容器尺寸
兼容性注意：旧 Android 和 Safari 4–8 需前缀
虽然现代浏览器已全面支持 align-items，但在部分老环境（如 Android 4.3 及以下、Safari 6.1 之前）中，需手动加 -webkit- 前缀才生效。
实际写法示例：
.container {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
min-height: 300px;
}
真正容易被忽略的点是：很多人只加了 align-items 的前缀，却漏掉 display: -webkit-flex —— 没这个，整个 flex 上下文就不成立，align-items 再加前缀也白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
