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

Question

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

我尝试过显示：行内块，垂直对齐：居中；但这行不通

有什么建议吗？

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 */
}