使用"position: sticky"让元素始终保持在屏幕上

Question

我有一个高度已知的容器（高度有时比屏幕长）。

该容器具有垂直和水平居中的元素（通过flex）。

我希望始终将此元素在可见部分的块中垂直居中于容器屏幕上。

我尝试过：

position:sticky; top:50% - 但这只能使其保持在容器底部的中心。

position:sticky; bottom:50% - 但这只能使其保持在顶部一半的中心

position:sticky; top: 50%; bottom:50%; - 看起来top覆盖了bottom，所以这就像我的第一次尝试，只有top:50%

我尝试设置负值，但没用

这里是演示：

.container {
  height: 1200px;
  background-color: rgba(0, 0, 0, .7);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
.center-piece {
  background-color: green;
  position: sticky;
  top: 50%;
}
.center-piece2 {
  background-color: steelblue;
  position: sticky;
  bottom: 50%;
}

<div class="container">
  <div class="center-piece">
    #1
  </div>
  <div class="center-piece2">
    #2
  </div>
</div>

有没有任何办法可以在容器的可见部分中保持完美居中，同时“始终在屏幕上”，包括顶部和底部？

这是我的应用程序的录屏：https://www.youtube.com/watch?v=CwYaBgolNHU “rawr”将成为其后面图像的控件。

- Noitidart

---

position: sticky 只在 Firefox 中有效（并且需要使用前缀在 Safari 中生效）：http://caniuse.com/#search=sticky - Michael Benjamin

感谢 @Michael_B - 这个没问题，我只针对火狐浏览器用户。 - Noitidart

Answer 1

我可能误解了您的问题，但您可以使用以下内容：

position: fixed;
top: 50vh;

?

.container {
  height: 1200px;
  background-color: rgba(0, 0, 0, .7);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
.center-piece {
  background-color: green;
  position: fixed;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%,50%);
}

<div class="container">
  <div class="center-piece">#1</div>
</div>

- Rounin

---

感谢Rounin的帮助尝试！但是它不起作用:( 请查看这个使用您方法的新屏幕录像-https://www.youtube.com/watch?v=84j2gaQ26yw - Noitidart

Answer 2

注意：不同的浏览器兼容性不同。

根据caniuse.com，position: sticky在当前主流浏览器上得到支持（不包括IE）。

jsFiddle

.container {
  height: 1200px;
  background-color: rgba(0, 0, 0, .7);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
.center-piece {
  background-color: green;
  position: sticky;
  top: 10px;                         /* 1 */
  bottom: 50%;
  left: 50%;
  transform: translate(-50%,50%);    /* 2 */
}
.center-piece2 {
  background-color: steelblue;
  position: sticky;
  bottom: 10px;                      /* 3 */
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

<div class="container">
  <div class="center-piece">#1</div>
  <div class="center-piece2">#2</div>
</div>

注意事项：

1. position: sticky 在元素到达视口顶部距离为 top: 10px 时生效。
2. CSS 定位和转换属性实现居中的原理详解
3. position: sticky 在元素到达视口底部距离为 bottom: 10px 时生效。

- Michael Benjamin

---

非常感谢 @Michael_B，我现在会测试一下！ - Noitidart

很遗憾，它没有起作用 :( 非常感谢您为我提供解决方案所付出的努力。我已经苦苦挣扎了几天 - 这里是一个屏幕录像，展示了使用您的解决方案它仍然无法工作 - https://www.youtube.com/watch?v=EJAiYyjJVUE - Noitidart

它在Firefox的片段和小提琴演示中运行正常。您的屏幕录像与此答案中的行为不匹配。存在冲突或其他问题。 - Michael Benjamin

谢谢您如此迅速的回复，我现在正在尝试着做这件事，并会随时向您报告进展情况。 :) - Noitidart

Answer 3

只需使用position:absolute;或position:fixed;而不是position:sticky;

- AnavKarandikar

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community