横屏图片居中失效本质是容器高度塌陷，因100vh在横屏下仍按竖屏高度计算；应改用min-height: 100vh + height: 100dvh + height: -webkit-fill-available双保险，并加vertical-align: middle消除基线干扰。
移动端横屏时图片居中失效，本质是容器高度塌陷
横屏切换后图片偏上或贴顶，不是图片样式丢了，而是父容器在横屏下高度没撑开——height: 100vh在 iOS Safari 和部分 Android WebView 中，横屏时 vh 仍按竖屏视口高度计算（比如竖屏 812px，横屏变成 375px 高，但 100vh 还是 812px），导致容器“以为自己很高”，实际内容区却很矮，align-items: center 失去作用对象。
- 不要依赖
height: 100vh做横屏垂直居中，它在横屏下语义失真 - 改用
min-height: 100vh+height: 100dvh（动态视口高度）双保险：现代浏览器支持dvh，横屏时自动取当前方向的视口高；旧浏览器 fallback 到min-height: 100vh - 若需兼容 iOS 15 以下，加一行
height: -webkit-fill-available，Safari 会按实际可用高度渲染
横屏下 text-align: center 为何突然不水平居中
横屏时父容器宽度突变，但你可能忘了它是否还满足 text-align 生效的前提：容器得有明确宽度、且未被 float 或 position: absolute 干扰。更隐蔽的问题是，某些 CMS（如 WordPress Zakra 主题）在横屏下会动态注入 max-width 或 transform，覆盖了你写的 text-align。
- 检查父容器 computed styles，确认
width或max-width没被 JS 动态重写 - 避免把
text-align: center写在<body>或<section>这类宽泛容器上——横屏时它们可能被框架插入额外 padding/margin - 稳妥做法：给图片包一层带固定类名的
<div class="img-landscape-center">，并在 CSS 中用@media (orientation: landscape)单独控制该类
flex 布局在横屏下对齐偏移，问题常出在 align-items
横屏时 align-items: center 看似没变，但图片缩放后基线位置可能浮动，尤其当父容器用了 font-size: 0 清除行内间隙又没重置子元素 vertical-align 时，img 作为替换元素默认按 baseline 对齐，视觉上就“往上跳了一点”。
- 在 flex 容器里显式加
align-items: center后，再补一句img { vertical-align: middle; }，消除基线干扰 - 别用
margin: auto混合 flex —— 横屏下 flex 引擎会忽略它，反而造成样式冲突 - 如果图片是 SVG 或含透明背景，横屏缩放后边缘像素渲染模糊，看起来像“没居中”，实则是抗锯齿偏差；加
image-rendering: -webkit-optimize-contrast可缓解
真正适配横屏的最小可行代码组合
这段代码在 iOS 16+、Android Chrome 120+、Samsung Internet 24+ 上横竖屏切换无跳动，且不依赖 JS 监听 resize 或 orientationchange：
立即学习“前端免费学习笔记（深入）”；
<div style="display: flex; justify-content: center; align-items: center; min-height: 100vh; height: 100dvh; height: -webkit-fill-available;"> <img src="photo.jpg" alt="logo" style="max-width: 100%; width: 100%; height: auto; vertical-align: middle;"> </div>
关键点不在多，而在每个属性都直击横屏痛点：100dvh 解决高度误判，-webkit-fill-available 是 iOS 最后一道兜底，width: 100% 强制覆盖 Safari 对 max-width 的宽松处理，vertical-align: middle 锁定基线——漏掉任意一个，横屏时都可能偏一两个像素。
