根本原因是viewport缩放、height计算逻辑变化及居中方案对视口尺寸的隐式依赖被打破；需用min-height:100dvh、Flex/Grid布局和严格高度继承链替代100vh与绝对定位。
手机横屏时元素居中失效，根本原因不是“屏幕变宽了”，而是 viewport 缩放、height 计算逻辑变化、以及某些居中方案对视口尺寸的隐式依赖被打破。直接给 min-height: 100vh 或 height: 100vh 往往在横屏下撑不满、错位甚至滚动条出现——这不是 bug，是 vh 单位在横屏时仍按“初始视口高度”计算（即竖屏时的高度），而非当前方向的实际高度。
viewport 设置必须显式声明 user-scalable=no
很多横屏居中问题其实在旋转前就埋下了：默认 viewport 允许用户缩放，横屏后浏览器可能触发缩放或重排 layout，导致 vh 值失真、transform 偏移量不准。iOS Safari 尤其敏感。
- 错误写法：
<meta name="viewport" content="width=device-width, initial-scale=1">—— 缺少user-scalable控制，横屏时可能触发非预期缩放 - 正确写法：
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> - 如果业务允许缩放（如阅读类页面），则不能依赖
vh或固定top/left百分比，改用 Flex/Grid
避免用 100vh 实现垂直居中
100vh 在横屏下 ≈ 竖屏时的宽度（比如 iPhone 14 Pro 竖屏 vh = 896px，横屏时仍为 896px，但实际可视高度只有 ~428px），导致容器高度远超屏幕，内容被“顶出”视口下方，justify-content: center 看似生效，实则居中在不可见区域。
- 替代方案：用
min-height: 100dvh（dynamic viewport height）——现代浏览器支持，会随横/竖屏自动切换；不支持时降级为min-height: 100vh+ JS 监听orientationchange - 更稳妥做法：不用高度撑满，改用
display: flex; align-items: center; justify-content: center;配合min-height: 100%和父容器height: 100vh（注意：父容器需设html, body { height: 100%; }） - 绝对定位方案慎用
top: 50%; transform: translateY(-50%)：横屏时若父容器没设height，50%会按错误基准计算
Flex/Grid 居中要加防抖容器高度
Flex 或 Grid 的 place-items: center 在横屏下本身没问题，但常见失效是因为父容器没“真正撑高”。例如只写了 height: 100vh，但 body 默认有 margin，或某层父元素未继承高度。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 必须确保根路径高度连通：
html, body { height: 100%; margin: 0; } - 居中容器建议用
min-height: 100dvh而非height: 100dvh，避免横屏时内容溢出被截断 - Grid 方案中，
place-items: center对子元素宽高无要求，但若子元素含max-width: 100%图片，横屏时图片可能拉伸变形——需额外加object-fit: contain或媒体查询限制
监听 orientationchange 不等于监听 resize
Android 和部分旧 iOS 版本不触发 orientationchange，只触发 resize；而 Chrome on Android 横屏时可能连续触发多次 resize。靠 JS 动态修正居中容易抖动或重复执行。
- 优先用 CSS 原生方案（
dvh, Flex, Grid），JS 仅作兜底 - 若必须用 JS，用
matchMedia('(orientation: landscape)')替代事件监听，它更稳定且可主动查询 - 避免在
resize回调里直接操作 DOM 样式，改用 class 切换 + CSS 过渡，减少 layout thrashing
横屏居中的关键不是“多写几行代码”，而是意识到：所有依赖视口单位（vh/vw）或固定百分比偏移的方案，在方向切换时都面临基准变更。真正鲁棒的做法，是让布局逻辑脱离方向假设——用 Flex/Grid 的内在对齐能力，配合 dvh 和严格的 height 继承链，而不是靠 JS 补丁反复修正。
