最可靠方案是display: flex+justify-content: center+align-items: center，但须满足父容器启用flex、有明确高度、图片未脱离文档流三个硬条件，缺一不可。
图片在容器里“正中间”，本质是水平+垂直双向居中，不是单靠 align="center" 或 text-align: center 就能搞定的。最可靠、现代项目首选方案是 display: flex + justify-content: center + align-items: center，但必须满足三个硬条件：父容器启用 flex、有明确高度、图片不脱离文档流。
flex 布局实现正中间：为什么写了却没动？
很多人复制了 justify-content: center; align-items: center，但图片纹丝不动——大概率卡在以下任一环节：
- 父容器没设
display: flex（只给<img>加没用） - 父容器高度塌陷：比如只写了
width: 400px，没设height或min-height，导致交叉轴长度为 0，“居中”无从计算 - 图片加了
position: absolute或float：元素已脱离文档流，flex 对齐规则直接失效 - 父容器本身是
display: grid或display: inline-block：会覆盖 flex 行为
正确写法示例：
<div style="display: flex; justify-content: center; align-items: center; height: 300px; border: 1px solid #ccc;"> @@##@@ </div>
绝对定位 + transform：适合固定尺寸容器
当容器尺寸固定、且图片需脱离文档流（比如遮罩层、加载图标），position: absolute + transform: translate(-50%, -50%) 是兼容性好（IE9+）、精度高的方案，但容易忽略上下文依赖：
- 父容器必须设
position: relative（或absolute/fixed），否则top: 50%会相对于 viewport 计算，滚动时飘移 - 必须同时写
top: 50%和left: 50%，再用transform: translate(-50%, -50%)回拉；单写transform不生效 - 图片宽高未加载完成时（如懒加载），可能出现顶部闪动；可提前设
min-height或用aspect-ratio缓解
典型写法：
<div style="position: relative; height: 300px; width: 400px;"> @@##@@ </div>
别踩 text-align 或 margin: auto 的坑
text-align: center 只控制水平方向，且仅对行内级子元素生效；margin: 0 auto 在块级图片上只管左右，浏览器根本不会计算“上下 margin auto”。两者单独使用都无法达成“正中间”效果：
-
text-align: center写在<img src="icon.png" alt="icon">自身上完全无效，必须作用于父容器 -
margin: 0 auto必须配合display: block，且父容器要有明确宽度；垂直方向它不起任何作用 - 若同时用了
display: flex父容器，再给图片加margin: auto，反而可能干扰align-items行为（尤其 Safari）
所以，只要目标是“正中间”，就别指望 text-align 或 margin: auto 单独扛大梁。
响应式场景下 height 怎么设才不翻车？
想让图片随窗口缩放始终居中，height: 100vh 最常用，但要注意实际渲染高度是否被其他样式压缩：
- 父容器若设了
padding或border，而没加box-sizing: border-box，真实高度会超出100vh，导致滚动条或错位 - 移动端 Safari 对
100vh解析不稳定（地址栏收起/展开时重算），更稳妥的是用min-height: 100vh+height: 100%组合 - 如果容器内容动态加载，初始高度为 0，可加
min-height: 300px保底，避免 flex 容器塌缩
响应式推荐写法：
<div style="display: flex; justify-content: center; align-items: center; min-height: 100vh; height: 100%;"> @@##@@ </div>
真正卡住人的从来不是“怎么写”，而是父容器有没有高度、图片有没有脱离流、flex 有没有启对地方——这三个点漏掉一个，“正中间”就只是代码里的幻觉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
