Flex居中必须同时满足三个条件：父容器设display: flex、justify-content: center和align-items: center；父容器有明确高度（如height: 100vh）；图片设max-width: 100%且height: auto。
直接给父容器加 display: flex + justify-content: center + align-items: center，再配 height: 100vh 和图片 max-width: 100%，是当前最规范、可维护性最强的写法。它不依赖浏览器兼容性补丁，也不靠 hack，且天然响应窗口缩放。
为什么不用 text-align: center 做响应式居中？
它只控制水平方向，垂直方向完全没作用；而且一旦父容器高度由内容撑开（比如多张图堆叠），图片就贴顶，根本谈不上“居中”。更隐蔽的问题是：如果父容器用了 float、display: inline-block 或被 margin 拉窄，text-align 就会失效，但控制台不会报错，调试时只能靠经验排查。
-
text-align: center必须写在父容器上，写在<img>自身上完全无效 - 它对块级子元素（如嵌套的
<div>）无影响，只作用于行内级内容 - 响应式场景下，若需适配不同视口高度，它无法保证图片始终在视口垂直中心
flex 居中必须同时满足哪三个条件？
漏掉任意一个，图片就会“看起来居中了”，实则只是碰巧——比如水平居中但垂直贴顶，或在桌面端正常、移动端偏移。
- 父容器设
display: flex、justify-content: center、align-items: center - 父容器有明确高度参照：推荐
height: 100vh（全视口高），或至少min-height: 50vh；用height: 100%很可能无效，因为上级容器未必有显式高度 - 图片自身加
max-width: 100%和height: auto，否则宽屏下溢出、窄屏下变形
示例：
<div style="display: flex; justify-content: center; align-items: center; height: 100vh;"> <img src="hero.jpg" alt="hero" style="max-width: 100%; height: auto;"> </div>
响应式尺寸上限怎么设才不翻车？
只写 max-width: 100% 在宽屏设备上会让图片铺满整个视口，失去呼吸感；硬写 width: 800px 又会在手机上溢出。真正可控的做法是结合视口单位与边界约束。
立即学习“前端免费学习笔记（深入）”；
- 用
max-width: 90vw替代100%，留出左右边距，避免紧贴屏幕边缘 - 若需更强控制，搭配
@media单独设断点：@media (max-width: 768px) { max-width: 95vw; } - 避免对图片设固定
height，否则拉伸变形；必须限定高度时，改用object-fit: cover+ 容器aspect-ratio
真正容易被忽略的是父容器的高度来源——不是“有没有 height”，而是“这个 height 是否可被浏览器稳定解析”。100vh 是目前最省心的选择，但它在 iOS Safari 某些版本中会把地址栏高度算进去，导致实际可用空间小于预期。如果项目要支持这类旧环境，得加 JS 补偿或降级为 min-height + 内容填充策略。
