Сохранить элемент с процентом в качестве фиксированной позиции

Question

У меня есть контейнер переменной высоты, и я хотел бы поместить элемент в его середину. Итак, я установил эти стили:

#parent {
    position: relative;
}

#child {
    position: absolute;

    top: 50%;
    transform: translateY(-50%);
}

Которые работают в большинстве случаев. Однако высота контейнера не только переменная, но и постоянно меняется.
Из-за этого этот код не будет работать. Пример:

@keyframes changeSize {
  0% {
    height: 100px;
  }
  
  50% {
    height: 150px;
  }
  
  100% {
    height: 100px;
  }
}


#parent {
  position: relative;
  width: 400px;
  height: 300px;
  background: red;
  
  animation-name: changeSize;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

#child {
  position: absolute;
  margin-block-start: 0;
  margin-block-end: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

<div id="parent">
  <p id="child">I should not be moving...</p>
</div>

Как видите, он движется. Итак, мой вопрос: есть ли способ поместить его в середину элемента (по вертикали), но не перемещая его, если контейнер меняет размер - просто с помощью CSS?

Answer 1

Проблема в том, что единицы измерения в процентах относятся к содержащему элементу. Так как #parent изменяется в результате анимации, значение в процентах изменяется. Изменение единицы измерения влияет на свойство процентной высоты, применяемое к #child. Обходной путь может быть очень сложным CSS (может не сработать в любой ситуации), поэтому лучшим решением будет использование JavaScript для захвата первоначальной 50% высоты в пикселях, чтобы единица больше не менялась. Важно также использовать прослушиватель событий resize, чтобы применить новую 50% высоту при изменении размера окна браузера.

window.addEventListener('load',resizeDiv());
window.addEventListener('resize',resizeDiv());

function resizeDiv(){
  var initialHeight = document.getElementById('parent').offsetHeight/2;
  document.getElementById('child').style.top = initialHeight+'px';
}

@keyframes changeSize {
  0% {
    height: 100px;
  }

  50% {
    height: 150px;
  }

  100% {
    height: 100px;
  }
}


#parent {
  position: relative;
  width: 400px;
  height: 300px;
  background: red;

  animation-name: changeSize;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

#child {
  position: absolute;
  margin-block-start: 0;
  margin-block-end: 0;
  right: 0;
}

<div id="parent">
  <p id="child">Hey!! I'm not moving anymore!</p>
</div>