Javascript 如何使响应图像位于屏幕的精确中心，并在所有边上保持相等的边距？

有人知道怎么做吗？我已经试了一段时间了，但没能让它在底边发挥作用。这个时尚（？）网站展示了我的意思：

---

它的反应灵敏，因此在任何时候（直到手机大小），利润都是相等的。你知道一种使用html和css的方法吗？甚至在vyctoire.com网站上也可以使用jquery。

，它们使用绝对定位。使用CSS，您可以执行以下操作：

.container {
  position: absolute;
  left: 100px;
  top: 100px;
  right: 100px;
  bottom: 100px;
}
/* Supposing the wrapper around #container is 100% wide and high */

或：

---

Flexbox有

对齐项目：居中和
调整内容：中心我不会建议像我在代码片段中那样使用它，它只是一个示例，向您展示它的外观


正文{
显示器：flex；
高度：100vh；
宽度：100vw；
对齐项目：居中；
证明内容：中心；
保证金：0；
}
.人造图像{
宽度：25vw；
高度：25vh；
背景：番茄；
}
html代码

<div id="slider">
 <figure>
 <img src="images/16711537_10208952366430422_5249357485128837134_n.jpg" alt>
  img src="images/images (1).jpg" alt>
 <img src="images/images (2).jpg" alt>
  <img src="images/images.jpg" alt>


</figure>
</div>

请发一些代码？你试过哪个？我不认为这真的回答了我认为他想要反应性强的侧面秀的问题。所以我提出了这个解决方案。我认为他想要垂直和水平地将图像居中“图像在屏幕的精确中心”-哦，还有，人们对片段的反应比原始代码更好，这就是我编辑它的原因。我并没有真正地改变你的代码（除了修复你的坏语法），这非常简单，而且很有效。谢谢。有一个问题我很好奇你是否知道如何解决。我在折叠下面添加了一个部分，如果你向下滚动，你会看到一些其他内容。问题是，当我在折叠下面添加一个部分时，滚动条就会出现，这很好。但是视口的宽度和高度没有改变，所以所有的东西看起来都向左移动了，你知道怎么修复吗？
<div id="slider">
 <figure>
 <img src="images/16711537_10208952366430422_5249357485128837134_n.jpg" alt>
  img src="images/images (1).jpg" alt>
 <img src="images/images (2).jpg" alt>
  <img src="images/images.jpg" alt>


</figure>
</div>

@keyframes slidy {
   0% { left: 0%; }
  20% { left: 0%; }
   25% { left: -100%; }
  45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
 75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
 }

  body { margin: 0; } 
  div#slider { overflow: hidden; }
  div#slider figure img { width: 20%; float: left; }
  div#slider figure { 
   position: relative;
   width: 500%;
  margin: 0;
   left: 0;
   text-align: left;
    font-size: 0;
   animation: 30s slidy infinite; 
   }