Javascript 如何将图像固定在中间？

当我向下滚动时，试图缩小的图像有问题。直到现在，我才发现它工作得很好，只是当我向下滚动时，图像会变小到图片的左上角，而不是中间。这样图像就不会停留在中间。有没有办法让我把图像保持在中间或者以某种方式将锚点改变到中心？< /P>

//当用户从文档顶部向下滚动50px时，调整标题的字体大小
window.onscroll=function（）{scrollFunction（）}；
函数滚动函数（）{
如果（document.body.scrollTop>50 | | document.documentElement.scrollTop>50）{
document.getElementById（“logohome”）.style.height=“15%”；
document.getElementById（“logohome”）.style.width=“15%”；
}否则{
document.getElementById（“logohome”）.style.height=“40%”；
document.getElementById（“logohome”）.style.width=“40%”；
}
}

#登录主页{
位置：固定；
排名：0；
左：43%；
宽度：35%；
转换：翻译（0%，0%）；
过渡：0.2s；
}

---

您可以通过以下代码执行此操作：

img{
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

---

首先用标记包装标记，然后让标记从标记继承集中式属性。这是HTML的代码，请修改它

<div>
Sample Text
<span style="text-align: center;"><img src="file_path_here"></span>
<!--Now you can put stuff here-->
</div>

示例文本

使用css很容易做到这一点

#logohome {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
```

Also I feel you can get rid of `width="50%" height="50%"` from the `img` tag.

1. `position: fixed` - Keeps your image fixed on the page
2. `top: 50%` - Places the image at 50% distance from the top of the window
3. `left: 50%` - Places the image at 50% distance from the left edge of the window

You should first try doing this much so you see how you image placement is.

Next add:
4. `transform: translate(-50%, -50%)` This will move your image "upwards" by 50% of its height and "leftwards" by 50% of its width and thus place it exactly in the center. 


Here is the working code snippet:




// When the user scrolls down 50px from the top of the document, resize the header's font size
window.onscroll = function() {
  scrollFunction()
};

function scrollFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementById("logohome").style.height = "15%";
    document.getElementById("logohome").style.width = "15%";
  } else {
    document.getElementById("logohome").style.height = "40%";
    document.getElementById("logohome").style.width = "40%";
  }
}
#登录主页{
位置：固定；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
我为你做了两个决定。第一种方法是使用
位置：fixed
，第二种方法是使用
位置：sticky
。在第二种解决方案中，您的图片将始终严格以分数为中心
marginleft:auto
和
marginright:auto

有必要吗


window.onscroll=function（）{scrollFunction（）}；
函数滚动函数（）{
如果（document.body.scrollTop>50 | | document.documentElement.scrollTop>50）{
document.getElementById（“logohome”）.style.width=“15%”；
document.getElementById（“logohome”）.style.left=“42%”；
}否则{
document.getElementById（“logohome”）.style.width=“35%”；
document.getElementById（“logohome”）.style.left=“32%”；
}
}
正文{
高度：3000px；
}
#回家{
位置：固定；
排名：0；
左：32%；
宽度：35%；
转换：翻译（0%，0%）；
过渡：0.2s；
文本对齐：居中；
}
你好。你的问题已经得到了答案。请将提供的任何有助于您的答案视为已解决。谢谢