Question

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

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

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

我尝试了什么：

position:sticky; top:50% - 但这只会使它集中在容器的下半部分。
position:sticky; bottom:50% - 但这只会让它集中在上半部分
position:sticky; top: 50%; bottom:50%; - 似乎top会覆盖bottom所以这就像我第一次尝试使用top:50%
我尝试设置负值，但它没有工作

这是一个演示：

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

无论如何都要保持它完全居中，而且总是在屏幕上＃34;在容器的可见部分，顶部和底部？

以下是我的应用程序的截屏视频：https://www.youtube.com/watch?v=CwYaBgolNHU

＆＃34; rawr＆＃34;将成为其背后图像的控制。

Answer 1

注意：以下代码仅适用于Firefox。

根据caniuse.com，只有Firefox和Safari（带前缀）支持position: sticky。

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>

注意：

position: sticky在元素到达viewport的top: 10px时启动。
How centering works with CSS positioning and transform properties
position: sticky在元素到达viewport的bottom: 10px时启动。

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>

将元素始终保持在屏幕上，其中＆＃34; position：sticky＆＃34;

2 个答案:

jsFiddle