html - 为什么这个html照片库无法居中？

我试图在我的网页上放一个图片库，但是它不能正确居中，这让我发疯。有什么建议么？
我已经尝试将很多不同的东西放在代码的中心，但是没有任何效果：/

HTML：

  <div style="display: inline-block; position: relative; text-align: center; width: 100%" >
    <h3 align="center" class="highlight">Photo Library</h3>
    <div align="center" class="" style="max-height:450px;max-width:800px;margin: 30px 30px 30px 30px; text-align: center">
      <img class="mySlides" src="images/slideshow/1.jpg" style="width:auto">
      <img class="mySlides" src="images/slideshow/2.jpg" style="width:auto">
      <img class="mySlides" src="images/slideshow/3.jpg" style="width:auto">
      <img class="mySlides" src="images/slideshow/4.jpg" style="width:auto">
      <img class="mySlides" src="images/slideshow/5.jpg" style="width:auto">
      <img class="mySlides" src="images/slideshow/6.jpg" style="width:auto">
      <img class="mySlides" src="images/slideshow/7.jpg" style="width:auto">
      <img class="mySlides" src="images/slideshow/8.jpg" style="width:auto">
      <img class="mySlides" src="images/slideshow/9.jpg" style="width:auto">
      <img class="mySlides" src="images/slideshow/10.jpg" style="width:auto">
      <img class="mySlides" src="images/slideshow/11.jpg" style="width:auto">
      <img class="mySlides" src="images/slideshow/12.jpg" style="width:auto">
      <img class="mySlides" src="images/slideshow/13.jpg" style="width:auto">
      <img class="mySlides" src="images/slideshow/14.jpg" style="width:auto">
      <img class="mySlides" src="images/slideshow/15.jpg" style="width:auto">
      <img class="mySlides" src="images/slideshow/16.jpg" style="width:auto">
      <img class="mySlides" src="images/slideshow/17.jpg" style="width:auto">
      <img class="mySlides" src="images/slideshow/18.png" style="width:auto">
      <img class="mySlides" src="images/slideshow/19.png" style="width:auto">
      <img class="mySlides" src="images/slideshow/20.jpg" style="width:auto">
      <img class="mySlides" src="images/slideshow/21.jpg" style="width:auto">
      <img class="mySlides" src="images/slideshow/22.jpg" style="width:auto">
      <img class="mySlides" src="images/slideshow/23.jpg" style="width:auto">
      <img class="mySlides" src="images/slideshow/24.jpg" style="width:auto">
      <img class="mySlides" src="images/slideshow/25.jpg" style="width:auto">
      <img class="mySlides" src="images/slideshow/26.jpg" style="width:auto">
      <img class="mySlides" src="images/slideshow/27.jpg" style="width:auto">
      <img class="mySlides" src="images/slideshow/28.jpg" style="width:auto">
    </div>

脚本：

<script>
  var myIndex = 0;
  carousel();

  function carousel() {
      var i;
      var x = document.getElementsByClassName("mySlides");
      for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
      }
      myIndex++;
      if (myIndex > x.length) {myIndex = 1}
      x[myIndex-1].style.display = "block";
      setTimeout(carousel, 5000);
  }
</script>

CSS：

.mySlides {
    display:none;
    width: 200px;
    height: 400px;
    align-self: center;
    text-align: center;
    align-content: center;
}

最佳答案

首先，将显示设置为阻止。然后给保证金自动

.mySlides {
    display:block;
    margin: auto;
    width: 200px;
    height: 400px;

}