css - 如何在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>

标签： css

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