Center dynamic <div> on screen

I am trying to create a gallery page as a list of thumbnails. Clicking on a thumbnail opens the corresponding snapshot in a "pop-up" -div displaying the full size of the image.

I am having problems centering this div on the screen. Each image has a different size.

How can I do this using javascript / jQuery?

JSFiddle: http://jsfiddle.net/29bo2k9q/

HTML:

<div id="pic1" class="white_content"><img src="https://scontent-a-fra.xx.fbcdn.net/hphotos-
xap1/v/t1.0-9/1378748_520568708029338_926300946_n.jpg?oh=d092e1f660360c84033f6144010052f9&oe=54F4B302"/></div>
<div id="pic2" class="white_content"><img src="https://scontent-a-fra.xx.fbcdn.net/hphotos-xaf1/v/l/t1.0-9/539421_418922361527307_1534426043_n.jpg?oh=006a46697258683be3423d378cf40feb&oe=54ABD335"/></div>
<div id="fade" class="black_overlay"></div>
<div id="wrapper">
    <section id="gallery">
        <ul>
            <li style="background-image: url('https://scontent-a-fra.xx.fbcdn.net/hphotos-xap1/v/t1.0-9/1378748_520568708029338_926300946_n.jpg?oh=d092e1f660360c84033f6144010052f9&oe=54F4B302');">
                <a href="javascript:void(0)" class="gallerylink" onclick = "document.getElementById('pic1').style.display='inline-block';document.getElementById('fade').style.display='block'"></a>
            </li>
            <li style="background-image: url('https://scontent-a-fra.xx.fbcdn.net/hphotos-xaf1/v/l/t1.0-9/539421_418922361527307_1534426043_n.jpg?oh=006a46697258683be3423d378cf40feb&oe=54ABD335');">
                <a href="javascript:void(0)" class="gallerylink" onclick = "document.getElementById('pic2').style.display='inline-block';document.getElementById('fade').style.display='block'"></a>
            </li>
        </ul>
    </section>
</div>

      

        
        
        
      

    

CSS

    #gallery {
    text-align: center;
    width: 100%;
}

#gallery ul{
    display: block;
    padding: 0;
    list-style: none;
    overflow: hidden;
}

#gallery ul li {
    display: inline-block;
    vertical-align: top;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 250px;
    height: 250px;
    margin: 2.5%;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px; /* future proofing */
    -khtml-border-radius: 5px; /* for old Konqueror browsers */
    cursor: pointer;

.black_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);
}

.white_content {
    position: absolute;
    top: 50%;
    left: 50%;
    display: none;
    margin: 0 auto;
    border: 8px solid orange;
    background-color: #eee;
    z-index:1002;
}

.gallerylink{
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
}