小屏幕浏览器工具栏激活时，如何为Flex垂直居中添加顶部偏移？

首先明确：没有专门针对手机浏览器激活状态工具栏的CSS选择器——浏览器的工具栏属于自身UI组件，不在网页DOM结构内，CSS无法直接检测或选中这类元素。

不过可以通过以下几种方案解决工具栏导致的居中偏移问题：

1. 使用CSS svh 视口单位（推荐） #

svh（Small Viewport Height）是CSS新增的视口单位，它会自动排除浏览器动态工具栏（比如地址栏、底部操作栏）占据的空间，直接以当前可用的视口高度作为计算基准。

替换原来的100vh即可解决问题：

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100svh; /* 替代100vh */
}

目前主流移动端浏览器（Chrome、Safari、Firefox）都已支持svh，不需要额外兼容处理。

2. JavaScript 动态计算视口高度（兼容旧浏览器） #

如果需要兼容不支持svh的旧版本浏览器，可以通过JS监听视口变化，动态计算可用高度并同步到CSS变量中：

// 计算并设置视口高度变量
function updateViewportHeight() {
  const viewportHeight = window.innerHeight;
  document.documentElement.style.setProperty('--viewport-height', `${viewportHeight}px`);
}

// 初始化执行
updateViewportHeight();
// 监听窗口大小变化
window.addEventListener('resize', updateViewportHeight);
// 监听页面显示状态（比如从后台切回时工具栏可能变化）
window.addEventListener('visibilitychange', updateViewportHeight);

然后在CSS中使用这个变量：

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--viewport-height, 100vh);
}

3. 优化布局逻辑 #

可以通过调整布局规则，减少对全屏视口的依赖：

• 给容器添加安全区域内边距，避免内容被系统UI遮挡
• 让容器的最小高度基于视口，但允许内容超出时滚动，同时保持表单在可用空间内居中

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  box-sizing: border-box;
}

内容的提问来源于stack exchange，提问作者Almir Mandic