如何在javascript幻灯片中垂直和水平居中图像？

Question

我正在尝试在 javascript 幻灯片中将图像垂直和水平居中，但是，我不知道如何进行这项工作，

我试过 display: inline-block with vertical-align: center;但它不会工作

有什么建议吗？

CSS

img {
  height: 100%;
  width: 100%;
  max-height: 100vh;
  max-width: 100vh;
  object-fit: contain;
}

.slideshow-container img {
  display: block;
  margin: 0px auto;
}

HTML

<div class="slideshow-container">

  <div class="mySlides fade">
    <img src="001%20(1).jpg" onclick="plusSlides(1)">

  </div>

<div class="mySlides fade">
    <img src="001%20(1).jpg" onclick="plusSlides(1)">

  </div>

<div class="nextprevious">
  <a class="prev" onclick="plusSlides(-1)">&#8592;</a>

  <a class="next" onclick="plusSlides(1)">&#8594;</a>
  <div class="numbertext"><span>003</span> / <span>003</span></div>
</div>

Answer 1

您应该查看display: flex、justify-content: center; 和align-content: center; 属性。

.slideshow-container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
}

.mySlides {
  margin: 0px auto; /* horizontal align center in div */
}