如何让设置justify:start的sticky div元素居中且适配视口高度变化？

要同时实现「视口高度变化时mockup保持可见」和「滚动时mockup在视口中居中」的效果，核心是调整position: sticky的定位逻辑，结合transform实现精准居中，而非依赖flex容器的固定高度。以下是修正后的代码和关键说明：

修改后的代码 #

CSS #

.navbar {
  width: 100%;
  height: 5rem;
  background-color: #f5d311;
}

.hero {
  display: flex;
  overflow: hidden;
  height: 70vh; /* 符合需求的70vh高度 */
  min-height: 42rem;
  justify-content: center;
  align-items: center;
}

.hero-block {
  width: 20rem;
  height: 20rem;
  background-color: #000;
}

.work-wrapper {
  height: 300vh; /* 保留足够滚动高度触发sticky效果 */
  position: relative;
}

.work {
  position: sticky;
  top: 50%; /* 将元素粘在视口垂直中点位置 */
  transform: translateY(-50%); /* 向上偏移自身高度的50%，实现完全居中 */
  display: flex;
  justify-content: center;
  width: 100%;
}

.work-block {
  width: 50rem;
  height: 20rem;
  background-color: #d07aff;
}

HTML #

<body>
  <div class="navbar"></div>
  <div class="hero">
    <div class="hero-block"></div>
  </div>
  <div class="work-wrapper">
    <div class="work">
      <div class="work-block"></div>
    </div>
  </div>
</body>

关键调整说明 #

1. Hero容器适配：直接将高度设为70vh，保持flex居中逻辑，满足第一个需求。
2. Sticky居中核心：
   • 用top:50%让sticky元素锚定在视口垂直中点，而非顶部。
   • 通过transform: translateY(-50%)抵消元素自身高度的一半，确保元素整体居中，无论视口高度如何变化，mockup始终处于可见区域。
3. 移除固定高度限制：删除work容器的height:100vh，避免视口增高时元素上下出现大量空白，同时保证sticky定位的稳定性。
4. 滚动容器保留：work-wrapper维持300vh高度，确保有足够滚动空间触发sticky效果。

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