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％高度，从而使单位不再变化。同样重要的是，如果调整浏览器窗口的大小，则还应使用difficultyLevelRecipe事件侦听器来应用新的50％高度。

resize

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

保持百分比固定的元素

1 个答案: