软键盘弹出时居中失效的根本原因是视口高度动态变化导致100vh等静态单位失准，需用100dvh替代并结合visualviewport监听与scrollintoview滚动锚点实现稳定居中。

软键盘弹出时居中失效的根本原因 不是 CSS 写错了，而是视口高度被压缩后，原本依赖 window.innerHeight 或 100vh 计算的居中逻辑彻底失准。iOS 和 Android 都会动态缩小 visualViewport.height，但 100vh 不更新、body 滚动锚点偏移、position: fixed 元素脱离真实可视区域——结果就是居中元素“飘”到键盘上方或卡在半空。

用 100dvh 替代 100vh 做容器高度基准100dvh 是动态视口单位，键盘弹出时自动收缩，比静态 100vh 可靠得多，目前 iOS 16.4+、Chrome 100+、Edge 105+ 已稳定支持。

• 根容器（比如表单外层 div）设 height: 100dvh;，不是 min-height，也不是直接设在 body 上
• 若需垂直居中内容，父容器加 display: flex; justify-content: center; align-items: center;
• 不要同时设 overflow: hidden —— 它会阻止 Safari 自动滚动到聚焦元素，反而加剧遮挡
• 微信 X5 内核不支持 dvh，需降级：用 visualViewport?.height 读取， fallback 到 window.innerHeight

绝对定位居中必须绑定 visualViewport 动态修正position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) 在键盘弹出后会失准，因为 top: 50% 仍按原始视口算。

• 监听 visualViewport.addEventListener('resize', handler)，而不是 window.resize
• 每次 resize 时重算：

  const centerY = visualViewport.height / 2;
  element.style.top = `${centerY}px`;

• 如果要用 transform，得配合 getBoundingClientRect() 动态微调，不能只靠初始计算
• 微信环境无 visualViewport，改用 focusin + setTimeout(() => { /<em> 读取 scrollTop + clientHeight </em>/ }, 100) 模拟

Flex 居中在软键盘场景下的实际限制display: flex 父容器设 justify-content: center; align-items: center; 看似万能，但有隐藏陷阱：

• 父容器高度必须由 100dvh 或 visualViewport.height 驱动，不能靠 100vh 或 min-height: 100vh
• 子元素不能设 position: absolute —— 它会脱离 Flex 流，居中失效
• iOS 下若父容器含 transform（如 translateZ(0)），会破坏键盘滚动联动，导致居中跳变
• 多个 input 切换时，align-items: center 可能让光标被顶出可视区，建议 focus 后额外调用 input.scrollIntoView({ block: 'nearest' })

真正稳的居中，从来不是单靠一个 CSS 属性，而是把高度感知（visualViewport）、事件时机（focus 而非 click）、滚动锚点（scrollIntoView）三者串起来。漏掉任意一环，软键盘一弹，居中就破。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！