始终将固定位置图像保持在视口中心

<div class="fixed-image">
  <img src="image.jpg" alt="Fixed Image">
</div>

<style>
.fixed-image {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

<div id="fixed-image">
  <img src="image.jpg" alt="Fixed Image">
</div>

<script>
window.addEventListener('scroll', function() {
  var viewportHeight = window.innerHeight;
  var viewportWidth = window.innerWidth;
  var image = document.getElementById('fixed-image');
  
  var imageHeight = image.offsetHeight;
  var imageWidth = image.offsetWidth;
  
  var topPosition = (viewportHeight - imageHeight) / 2;
  var leftPosition = (viewportWidth - imageWidth) / 2;
  
  image.style.top = topPosition + 'px';
  image.style.left = leftPosition + 'px';
});
</script>