CSS Sticky：相对于其容器的中心元素

Question

我尝试通过位置粘性将元素居中。但我想将它相对于其容器元素定位。容器的高度和粘性元素的高度都是可变的。所以在我的示例中，我将它放在我想要的位置，但它与它的容器无关。

但该元素显然位于顶部。它应该只在容器元素内开始，将其自身放置在屏幕的中心（顶部：50％，变换：translateY（-50％））并且只要容器元素存在就stick。这可能吗？

.grid {
  display: grid;
  align-items: start;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  padding: 500px 0;
  position: relative;
}

.column {
  min-height: 800px;
  background-color: red;
  position: relative;
}

.sticky {
  position: sticky;
  top: 50%;
  transform: translateY(-50%);
  background-color: black;
}

<div class="grid">
  <div class="column">
    <div class="sticky" style="height: 500px;"></div>
  </div>
  <div class="column">
     
  </div>
  <div class="column">
    <div class="sticky" style="height: 30px;"></div>
  </div>
</div>

Answer 1

问题是带有粘性的

top:50%

指定了它应该粘在哪里，而不是它的相对位置，这意味着它粘在屏幕的中间，但是你将它平移了它高度的一半。所以要做的就是用

top: 0;

让它正常粘住，然后用 flexbox

垂直居中

.grid {
  display: grid;
  align-items: start;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  padding: 500px 0;
}

.column {
  min-height: 800px;
  background-color: red;
}

.center {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
}

.sticky {
  position: sticky;
  top: 0;
  min-height: 500px;
  background-color: black;
}

<div class="grid">
  <div class="column center">
    <div class="sticky"></div>
  </div>
  <div class="column"></div>
  <div class="column"></div>
</div>