flex布局实现视口级居中必须设父容器高度，推荐用height: 100vh确保占满视口；图片需配合max-width: 90vw和height: auto保持宽高比与留白；避免浮动、定位或CSS优先级干扰flex上下文。
flex布局实现视口级居中必须设父容器高度
图片在全屏布局中居中，本质不是“让图片居中”，而是让它的容器能提供可计算的垂直空间。只写 justify-content: center 不起作用，因为 align-items: center 需要父容器有明确高度才能生效。
常见错误是把 display: flex 加在 <body> 上，结果整个页面流被破坏；或给父 <div> 只设 width: 100% 却没设高度，导致图片水平居中但垂直贴顶。
- 推荐用
height: 100vh，确保容器占满视口高度（注意：Safari iOS 会把地址栏高度算进 vh，必要时可用min-height: 100vh+height: auto组合） - 若需兼容 Android 4.4 及更早版本，加
display: -webkit-flex - 避免对图片本身设
position: absolute或float，否则它会脱离 flex 上下文
示例：
<div style="display: flex; justify-content: center; align-items: center; height: 100vh;"> <img src="photo.jpg" alt="full-screen image" style="max-width: 90vw; height: auto;"> </div>
max-width 和 vw 单位控制图片尺寸上限
全屏居中不等于“铺满屏幕”，大图直接 width: 100% 在宽屏下会撑得太满、丢失留白；在窄屏下又可能过小。用 max-width 配合视口单位才是可控方案。
-
max-width: 90vw比100%更安全：保留左右至少 5% 边距，避免贴边压抑 - 搭配
height: auto是强制项，否则宽高比断裂，图片拉伸变形 - 不要用
width: 100vw—— 它会强制填满整个视口宽度，忽略滚动条宽度，导致水平溢出 - 若需适配超大屏（如 4K），可加媒体查询：
@media (min-width: 1920px) { img { max-width: 1200px; } }
响应式图片居中失效的三个典型原因
代码看起来没问题，但图片就是不居中？大概率卡在这三处：
立即学习“前端免费学习笔记（深入）”；
- 父容器用了
float: left或position: relative且没清除浮动/没设overflow: hidden→ 容器高度塌陷，align-items: center失效 - 图片外层套了
<a>标签但没处理其默认 inline 行为 → 必须给<a>设display: block，否则 flex 容器会把它当行内内容处理 - CSS 优先级冲突：比如全局重置了
img { display: inline-block !important; }，覆盖了你设的display: block或 flex item 行为
调试建议：用浏览器 DevTools 检查父容器 computed height 是否为 0，以及图片是否真成了 flex item（Elements 面板里看 display 值）。
text-align: center 仅适用于纯水平居中场景
如果只要求图片在宽屏下水平居中、垂直方向无所谓（比如 banner 图、页眉 logo），text-align: center 是最轻量、兼容性最好的选择——但它只对父容器生效，且完全不管垂直位置。
- 必须写在父
<div>上，写在<img>上无效 - 父容器不能是
display: flex或display: grid，否则text-align被忽略 - 若父容器用了
font-size: 0（常用来消除 inline 元素间隙），图片会消失或错位，得额外加font-size: 16px回来 - 此法无法响应窗口缩放做垂直调整，想随视口变化上下移动，必须换 flex 或 JS 计算
真正难的不是让图片“看起来居中”，而是让它在各种设备、各种缩放比例、各种嵌套结构里都稳定居中——这取决于你是否愿意花两分钟检查父容器的高度和 display 行为，而不是反复调图片自身的 margin。
