I'm doing a custom gallery for my website and I've got the overview part working with all the thumbnails. When a thumbnail is clicked, the full picture appears on the screen, but I'm having problems aligning it to the center of the screen.

Note that each picture has different dimensions.

This is what I have done so far:

```
.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;
}

```

And here is the 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>

```

Thanks.