html - 居中弹出div

Question

我正在为我的网站制作一个自定义画廊，并且我已经获得了包含所有缩略图的概览部分。单击缩略图时，完整图片会显示在屏幕上，但我无法将其与屏幕中心对齐。

请注意，每张图片都有不同的尺寸。

这是我到目前为止所做的:

.overlay{
    cursor: pointer;
    display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
}
.popup {
    display: none;
    position: absolute;
    margin: 0 auto;
    border: 8px solid orange;
    background-color: #eee;
    z-index:1002;
    overflow: auto;
}
.galleryentity{
    display: table;
    margin-bottom: 35px;
    float: left;
    width: 259px;
    height: 250px;
    background-color: #2B3039;
    margin-right: 30px;
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    -webkit-box-shadow: 0px 3px 5px 2px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 3px 5px 2px rgba(50, 50, 50, 0.75);
    box-shadow:         0px 3px 5px 2px rgba(50, 50, 50, 0.75);
}
.gallerylink{
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
}

这是 HTML:

<div class="galleryarea">
    <div class="galleryframe">
        <div class="galleryentity" style="background-image:url('pic1.jpg');">
            <a href="javascript:void(0)" class="gallerylink" onclick = "document.getElementById('pic1').style.display='block';document.getElementById('fade').style.display='block'"></a>
            <div id="pic1" class="white_content"><img class="pic1.jpg"></div>
        </div>
        .
        .
        .
    </div>
</div>

谢谢。

Answer 1

中心弹出窗口的 CSS 方法:

.popup {

      position:fixed;
      /*display: none;*/    /* debug */
      border: 2px solid orange;  /* 8 is too thick ? */
      background-color: #eee;
      z-index:1002;
      overflow: auto;
      top:50%;
      left:50%;
      width:500px;  /* adjust accordingly */
      height:500px;   /* adjust accordingly */
      margin-left:-250px;   /* negative half of width above */
      margin-top:-250px;   /* negative half of height above */

       }