flex布局图片双向居中必须设父容器高度，否则align-items: center无效；推荐height: 100vh或min-height，或改用绝对定位+transform兜底。
flex布局实现图片双向居中必须设父容器高度
不设高度，align-items: center 就没作用——它是在交叉轴（垂直方向）上居中，但若父容器高度是 auto 或未定义，浏览器默认按内容撑开，结果就是图片贴顶。常见错误是只写 display: flex; justify-content: center; align-items: center，却忘了给父容器加 height 或 min-height。
实际操作建议：
- 视口级居中用
height: 100vh，确保填满整个可视区域 - 内容区居中推荐
min-height: 300px这类有下限的值，避免小图导致容器塌缩 - 若容器高度由子内容动态决定，改用
place-items: center配合display: grid，它对auto高度更友好
text-align + margin: auto 组合只管水平，不管垂直
text-align: center 是针对行内元素（包括默认 display: inline 的 <img>）的文本对齐方式，它只能控制水平方向；而 margin: 0 auto 要生效，必须配合 display: block，但它本身不提供垂直控制能力。两者叠加仍无法实现上下居中。
典型误用场景：
立即学习“前端免费学习笔记（深入）”；
- 给
<img>直接加margin: auto却没设display: block→ 不生效 - 在无高度限制的
<div>上设text-align: center并指望图片垂直居中 → 完全无效 - 用
vertical-align: middle试图让图片在块级容器中垂直居中 → 只对行内/表格单元格有效，别乱套
绝对定位 + transform 是唯一能脱离容器尺寸约束的方案
当父容器高度不可控、又必须严格居中时，position: absolute 配合 transform: translate(-50%, -50%) 是最可靠的兜底方式。它不依赖父容器是否有明确高度，也不吃 flex/grid 的渲染规则。
关键步骤缺一不可：
- 父容器必须设
position: relative（建立定位上下文） -
<img>设position: absolute; top: 50%; left: 50%（锚点移到中心） - 立刻加
transform: translate(-50%, -50%)（把自己中心点拉回容器中心） - 响应式下记得加
max-width: 100%; height: auto，否则大图会溢出或变形
媒体查询切换对齐方式时，只改父容器的 justify-content 或 text-align
响应式图片居中不是“每个断点都重写 img 样式”，而是通过媒体查询控制父容器行为。比如小屏居中、大屏右对齐，只需切换 justify-content 值，图片本身的尺寸和显示逻辑保持不变。
正确写法示例：
- 基础层：
.img-container { display: flex; justify-content: center; } - 小屏：
@media (max-width: 768px) { .img-container { justify-content: center; } } - 大屏：
@media (min-width: 1025px) { .img-container { justify-content: flex-end; } } - 千万别在每个断点里重复写
img { width: 100% }—— 这既冗余，又容易和max-width: 100%冲突
真正难的是垂直方向的约束：要么靠父容器高度可控，要么靠绝对定位逃逸。多数人卡在 align-items: center 没反应，其实问题不在 flex 写错了，而在容器根本没高度可“居”。
