flex容器中图片垂直居中失效，主因是父容器未设display: flex和align-items: center，且需明确高度；应避免height: 100%依赖继承，优先用flex居中+object-fit控制缩放，并为ie11加-ms-前缀及table-cell降级。
图片在 flex 容器里垂直居中不生效？检查父容器 display 和 align-items
Flex 垂直居中失效，90% 是因为父容器没设 display: flex，或者漏了 align-items: center。它只对 flex 项目起作用，不是“给图片加个属性就能中”。
常见错误现象：img 元素本身设置了 align-items: center（无效），或父容器用了 display: inline-flex 但高度未定义（导致“中”无参照）。
- 父容器必须有明确高度（比如
height: 300px或min-height: 100vh），否则align-items: center没有计算基准 - 避免用
display: inline-flex包裹单张图——行内 flex 容器默认不占满父宽，且高度行为更难预测 - 如果父容器是
<div> 且内容只有图片，直接设 <code>display: flex; align-items: center; justify-content: center;最稳妥图片本身 height: 100% 不起作用？别忘了父级高度传递链
想让图片撑满容器再居中，常会写
img { height: 100%; }，但浏览器不会自动把高度从 body 一路传下来。flex 居中不依赖图片尺寸，但如果你靠高度继承来布局，就会卡在这儿。使用场景：全屏轮播图、卡片内等高图区、模态框中的大图预览。
-
html, body { height: 100%; }是必要起点，否则div { height: 100%; }无意义 - 每个中间父级（比如
.card > .image-wrapper > img）都得显式设height: 100%，CSS 高度不自动继承 - 更省心的做法：放弃
height: 100%，改用 flex 的align-items+justify-content居中，图片保持原始尺寸或用max-width: 100%防溢出
IE11 下 flex 垂直居中错位？加 -ms- 前缀和 fallback 布局
IE11 对
align-items支持有 bug，尤其当父容器用min-height而非固定height时，图片可能贴顶或偏下。这不是写法错，是渲染引擎限制。性能影响：加前缀不增加体积，但多一层 CSS 规则；fallback 方案（如 table-cell）会略微增加 DOM 理解成本，但兼容性稳。
- 必须写
-ms-align-items: center;（注意是-ms-，不是-webkit-） - 对 IE11 单独提供 fallback：用
display: table-cell; vertical-align: middle;替代 flex，同时设width: 100%; height: 100%; - 不要依赖
margin: auto垂直居中——它只在绝对定位 + 四边 offset 全设时才生效，且 IE11 对top/bottom: 0+margin: auto支持也不一致
图片被拉伸变形？object-fit 是比 width/height 更安全的控制方式
很多人一说“居中”，顺手就写
width: 100%; height: 100%，结果图被压扁。flex 居中解决的是位置问题，不是缩放问题——这是两个独立控制维度。参数差异：
object-fit: cover保持比例裁剪填充，contain保持比例完整显示，fill强制拉伸（慎用）。- 优先用
object-fit: cover;+width: 100%; height: 100%;，比 JS 计算缩放比例轻量得多 - IE 不支持
object-fit，需配合 polyfill（如object-fit-images）或降级为 background-image - 如果容器宽高比固定（如 4:3 卡片），用
aspect-ratio: 4 / 3配合object-fit更可靠，避免因父容器尺寸抖动导致图片跳动
真正麻烦的不是怎么写居中，而是搞清「谁的高度要设」「谁负责缩放」「谁兜底旧浏览器」——这三件事没理清，代码写十遍也还在调 margin-top。
-
