如何将叠加图像居中？

Question

当用户点击我的图库中的一张照片时，我正试图将我的叠加图像居中。然而，即使我有margin: 0 auto，它似乎也更加朝右。我不确定我是否覆盖了某些东西，或者我的一个父元素有一个奇怪的宽度。

我的HTML：

<!-- Gallery -->
  <div id="photos">
    <ul id="photo-gallery">
      <li>
        <a href="images/header.jpg">
        <img src="images/header.jpg">
      </a>
      </li>
      <li>
        <a href="images/header.jpg">
        <img src="images/header.jpg">
      </a>
      </li>
      <li>
        <a href="images/header.jpg">
        <img src="images/header.jpg">
      </a>
      </li>
      <li>
        <a href="images/header.jpg">
        <img src="images/header.jpg">
      </a>
      </li>
      <li>
        <a href="images/header.jpg">
        <img src="images/header.jpg"></a>
      </li>
      <li>
        <a href="images/header.jpg">
        <img src="images/header.jpg">
      </a>
      </li>
      <li>
        <a href="images/header.jpg">
        <img src="images/header.jpg">
      </a>
      </li>
      <li>
        <a href="images/header.jpg">
        <img src="images/header.jpg">
      </a>
      </li>
      <li>
        <a href="images/header.jpg">
        <img src="images/header.jpg">
      </a>
      </li>
    </ul>
  </div>

我的CSS：

/* gallery */

#background {
  width: 100%;
}

#photos {
  width: 100%;
  display: none;
}

#overlay {
  background: rgba(0,0,0, .8);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  text-align: center;
}

#overlay img {
  width: 700px;
  margin: 20% auto;
  position: fixed;
  border-radius: 5px;
}

#photo-gallery {
  display: flex;
  flex-wrap: wrap;
  width: 80%;
  list-style: none;
  margin: 0px auto;
  padding: 10px;
  text-align: center;
}

#photo-gallery li {
  margin: 10px auto;
  padding: 10px;
}

#photo-gallery img {
  margin: 0 auto;
  width: 400px;
  display: block;
  border: 5px solid black;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  opacity: 0.75;
}

#photo-gallery img:hover {
  opacity: 1;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  transition: all 0.3s;
}

我的JavaScript：

// gallery

$(document).ready(function() {
  var $overlay = $('<div id="overlay"></div>');
  var $image = $("<img>");

  //An image to overlay
  $overlay.append($image);

  //Add overlay
  $("body").append($overlay);

    //click the image and a scaled version of the full size image will appear
    $("#photo-gallery a").click( function(event) {
      event.preventDefault();
      var imageLocation = $(this).attr("href");

      //update overlay with the image linked in the link
          $image.attr("src", imageLocation);

      //show the overlay
      $overlay.show();
    });

    $("#overlay").click(function() {
      $( "#overlay" ).hide();
    });
    $("#photos").slideDown(2000);
});

Answer 1

好的，我有点改变你的代码 -

#overlay img {
  width: 700px;
  position: fixed;
  border-radius: 5px;
  margin: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

如果你想看到那么你可以使用这个链接 -

https://jsbin.com/kexeham/edit?output