滚动条出现时如何保证元素在任意屏幕尺寸下始终居中？

滚动条触发时的居中偏移，根源是纵向滚动条会占用滚动容器内部的部分水平空间，导致容器的可用内容宽度被压缩。原本基于内容宽度计算的居中参考线，会和视口真实几何中心产生「半个滚动条宽度」的偏移，最终表现为居中元素偏向滚动条的反方向。
以下两种纯CSS跨浏览器方案，可在不引入JS、不强制隐藏/显示滚动条的前提下解决问题：

这是W3C标准CSS属性，目前所有现代浏览器（Chrome、Edge、Firefox、Safari 18+）均已支持，是最简洁的实现方式：

• 给滚动容器设置该属性后，浏览器会从页面加载初始就预留出滚动条的固定宽度空间，无论滚动条是否触发显示，容器的内容可用宽度都不会发生变化，居中参考线自然不会偏移。
• 滚动条完全根据内容高度自动触发显示/隐藏，不存在强制显隐的问题，完全符合约束要求。
  实现代码：

/* 页面根滚动容器 */
.page-scroll-container {
  height: 100vh;
  overflow-y: auto;
  /* 核心属性：稳定预留滚动条占位 */
  scrollbar-gutter: stable;
}

/* 居中元素的布局容器 */
.center-layout {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
}

/* 需始终居中的绿色元素 */
.green-block {
  width: 280px;
  height: 160px;
  background: #27ae60;
}

如果需要兼容不支持scrollbar-gutter的老旧浏览器（比如旧版Safari），可以通过两层容器的隔离结构实现：

• 最外层容器负责触发滚动条，完全不干预滚动条的自动显示逻辑。
• 内层用于计算居中参考的容器设置宽度为100vw（即整视口宽度，不受滚动条占位影响），其几何中心永远和视口中心重合，和滚动条是否存在、占用多少宽度无关。
• 给最外层容器加overflow-x: hidden，消除内层全宽带来的不必要横向滚动条溢出。
  实现代码：

/* 最外层滚动容器：正常触发滚动条 */
.page-scroll-container {
  height: 100vh;
  overflow-y: auto;
  /* 消除横向溢出带来的不必要滚动条 */
  overflow-x: hidden;
}

/* 居中参考层：占满整个视口宽度 */
.center-reference-layer {
  width: 100vw;
  /* 撑起页面总滚动高度，保证纵向滚动范围正确 */
  min-height: 3000px;
  display: flex;
  justify-content: center;
}

.green-block {
  width: 280px;
  height: 160px;
  background: #27ae60;
  /* 若需要元素滚动时始终停在视口中心，搭配sticky定位使用 */
  position: sticky;
  top: 50vh;
  transform: translateY(-50%);
}

方案说明 #

• 两种实现均未引入任何JavaScript，完全基于标准CSS完成。
• 滚动条的显示逻辑完全跟随内容高度变化，不存在强制隐藏或强制常驻显示的问题。
• 不依赖Chrome私有的overflow-y: overlay属性，跨浏览器表现一致。

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