使用“位置：粘性”将元素始终显示在屏幕上

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”将是其背后图像的控件。

Answer 1

注意：兼容性因浏览器而异..

根据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. 当元素到达视口的top: 10px 时，position: sticky 启动
2. How centering works with CSS positioning and transform properties
3. 当元素到达视口的bottom: 10px 时，position: sticky 启动

Answer 2

我可能误解了你的问题，但你可以使用：

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>