Javascript 如何防止图像移动

我举了一个例子来说明我的问题：

*{
保证金：0；
填充：0；
框大小：边框框；
}
.包装纸{
位置：相对位置；
最小高度：100vh；
高度：100vh；
背景色：#01383a；
显示器：flex；
对齐项目：居中；
证明内容：中心；
颜色：#f5c1a0；
字体大小：3rem；
}
.包装纸h2{
z指数：1；
}
.wrapper.image{
宽度：10雷姆；
位置：绝对位置；
}
.wrapper.image.bottom-left{
底部：4rem；
左：4rem；
}
.wrapper.image.top-right{
顶部：4rem；
右：4rem；
}
.wrapper.image img{
宽度：100%；
}

一些随机的标题文本

您最好使用引导列（），因为它们可以动态调整列中图像/文本的大小。或者您可以使用以下css保持相同的位置

#image {
 width:100%;
 height:100%;
 margin-left:50%;
 margin-right:50%;
 position:absolute;
}

---

如果需要在页面大小减小时调整图像大小，可以在CSS中使用。这些属性还可用于更改任何屏幕大小的任何元素的属性。

如果希望标题始终居中，请使用

文本对齐：居中

---

在h2元素上

调整浏览器大小时，右图像移动的原因是，与右边缘相比，使用

right:4rem。如果将该值更改为
left:104rem然后它将始终位于距离窗口左边缘104 rem的位置，无论窗口宽度如何


*{
保证金：0；
填充：0；
框大小：边框框；
}
.包装纸{
位置：相对位置；
最小高度：100vh；
高度：100vh；
背景色：#01383a；
显示器：flex；
对齐项目：居中；
证明内容：中心；
颜色：#f5c1a0；
字体大小：3rem；
}
.包装纸h2{
z指数：1；
}
.wrapper.image{
宽度：10雷姆；
位置：绝对位置；
}
.wrapper.image.bottom-left{
底部：4rem；
左：4rem；
}
.wrapper.image.top-right{
顶部：4rem；
左：104rem；
}
.wrapper.image img{
宽度：100%；
}

一些随机的标题文本
不，我希望图片处于最佳状态，这并不重要，重要的是标题需要居中。是的，我知道右边的：4rem总是把它放在角落里，这就是我不知道如何解决它的地方。我试过左边的：104rem，它是有效的，是的，我没有意识到它，谢谢Mate，引导解决方案很有趣，但我不使用引导或jquery:D。然而，我发现了这一点，而不是设置。右上{right:4rem}我可以简单地设置为左：100rem，它就可以了@你是对的