流式居中需用display: flex配合height: 100vh实现水平垂直居中，margin: 0 auto因依赖父容器明确宽度且不支持垂直居中而在流式布局中常失效；关键在于容器高度不塌陷、max-width设为90vw等防溢出值。
流式居中不是“让图片自己动”，而是让它的容器能随视口伸缩，同时稳稳托住它——display: flex 配合 height: 100vh 是最直接有效的组合，比用 margin: 0 auto 或 text-align: center 更可靠，尤其在需要垂直居中的场景。
为什么 margin: 0 auto 在流式布局里经常失效
因为 margin: 0 auto 只对块级元素生效，且依赖父容器有明确宽度。而流体布局中，父容器常是 width: 100% 或未设宽，导致浏览器无法计算“可用空间”，auto 就失去依据。
- 图片没加
display: block，仍是行内元素，margin不起作用 - 父容器用了
float或position: absolute，脱离文档流，margin失去上下文 - 写了
width: 100%又写max-width: 100%，CSS 优先级冲突，实际宽度可能被覆盖
flex 流式居中的最小可靠写法
不靠 JS、不靠媒体查询，纯 CSS 实现窗口缩放时始终水平+垂直居中：
<div style="display: flex; justify-content: center; align-items: center; height: 100vh;"> <img src="photo.jpg" alt="logo" style="max-width: 90vw; height: auto;"> </div>
-
height: 100vh是关键：提供垂直方向的参考高度，否则align-items: center没作用 -
max-width: 90vw比100%更安全——留出左右边距，避免紧贴视口边缘 - 不用设
width或height，靠max-width+height: auto保比例、防拉伸
响应式对齐切换（小屏居中 → 大屏左对齐）
用媒体查询改父容器的 justify-content，而不是反复调整图片本身：
立即学习“前端免费学习笔记（深入）”；
<div class="img-container"> <img src="photo.jpg" alt="responsive"> </div>
对应 CSS：
.img-container {
display: flex;
justify-content: center;
}
@media (min-width: 1024px) {
.img-container {
justify-content: flex-start;
}
}- 只在断点处覆盖对齐方式，不重复定义尺寸或
display - 如果用了
text-align方案，就换成text-align: left，但注意它不能控制垂直位置 - 避免在媒体查询里给
img单独加margin，容易和flex冲突
真正容易被忽略的是容器高度——很多“居中失败”其实是因为父容器高度塌陷了，align-items: center 无从下手；还有就是 max-width 值设得太大（比如 100vw），在窄屏下会因滚动条宽度导致溢出，90vw 或 calc(100vw - 2rem) 才更鲁棒。
