Keep element always on screen with "position: sticky"

Question

I have a container with known height (height is sometimes longer then screen).

This container has a vertically and horizontally centered element (via flex).

I was hoping to keep this element always on the screen vertically centered in the block in the visible portion of the container.

What I tried:

• position:sticky; top:50% - however this only keeps it centered on the bottom half of container.
• position:sticky; bottom:50% - however this only keeps it centered on top half
• position:sticky; top: 50%; bottom:50%; - it seems top overrides bottom so this is just like my first try with top:50% only
• I tried setting negative values but it didn't work

Here is a demo:

.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>

Is there anyway to keep it perfectly centered, while "always on screen", in the visible porition of container, both top and bottom?

Here is a screencast of my application: https://www.youtube.com/watch?v=CwYaBgolNHU

The "rawr" will be the controls for the image behind it.

Answer 1

NOTE: Compatibility varies across browsers..

According to caniuse.com, position: sticky is supported on current major browsers (Not 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>

NOTES:

1. position: sticky kicks in when element reaches top: 10px of viewport
2. How centering works with CSS positioning and transform properties
3. position: sticky kicks in when element reaches bottom: 10px of viewport

Answer 2

I may have misunderstood your question, but can you use:

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>

Answer 3

Just use postition:absolute; or position:fixed; instead of position:sticky;