Center a dynamic <div> on screen

Question

I'm trying to create a gallery-page as a list of thumbnails. When a thumbnail is clicked, the related picture opens in a "popup"-div showing the full size of the image.

What I'm having problems with is centering that div on the screen. Each picture has different dimensions.

How to do this with 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;
}

Answer 1

You could achieve this by adding transform: translate(-50%, -50%); , left: 50%; and top: 50%; to .white_content like this:

JSFiddle - DEMO

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

You should also add vertical-align: middle; to your images to remove the below space - DEMO