Modal with child content

Center align modal window no matter its width and height.

by otinanaipali

HTML

<link rel="stylesheet" href="http://www.theok.gr/velocity-time/css/reset.css">
<ul class="elements">
    <li>
        <div class="content">01</div>
    </li>
    <li>
        <div class="content">02</div>
    </li>
    <li>
        <div class="content">03</div>
    </li>
    <li class="openMe">
        <div class="content">04</div>
    </li>
    <li>
        <div class="content">05</div>
    </li>
</ul>

CSS

body {
    background:#efefef
}
ul {
    margin:0;
    padding:0;
    left:0;
    top:0;
    right:0;
    bottom:0;
    position:absolute;
    background:#ccc;
}
li {
    position:absolute;
    text-align:center;
    font-size:0;
    line-height:0;
    width:0;
    height:0;
    
    transition:all .3s linear;
}
li:before {
    content:"";
    display:block;
    width:100%;
    height:100%;
    top:0;
    left:0;
    position:absolute;
    opacity:0;
    visibility:hidden;
    background:#000;
    transition:all .3s linear .3s
}
li.openMe:before {
    opacity:.5;
    visibility:visible;
}
li.openMe {
    width:100%;
    height:100%;
    left:0!important;
    top:0!important;
    position:absolute;
    cursor:default;
    z-index:1;
    
}
li > .content {
    display:inline-block;
    position:relative;
    width:100px;
    height:100px;
    padding:0;
    cursor:pointer;
    color:#dfdfdf;
    background:#fff;
    font:bold 70px/100px Arial;
    border-radius:50px;
    transition:border-radius .3s linear,padding .3s linear,margin .3s linear
}
li.openMe > .content{
    width:80%;
    max-width:1000px;
    min-width:320px;
    padding:0;
    margin:0;
    border-radius:0;
    top:10%;
    max-height:80%;
    height:auto;
    transition: all .3s linear .3s
}
li > .content:hover {
    z-index:1;
    border-radius:0;
    margin-top:-20px;
    margin-left:-20px;
    padding:20px
}
li.openMe > .content:hover{
    margin:0;
    padding:0;
}

JavaScript

$(function () {

    var allElems = $('.elements');

    $('li').each(function () {

        $(this).css({
            'left': randomLeft() + 'px',
            'top': randomTop($(this).children('.content')) + 'px',
        });

    });

    $('li').click(

    function () {

        $(this).toggleClass('openMe');

    }

    );

    function randomTop(elem) {

        var winHgt = allElems.height() - $(elem).height();

        var rdmTop = Math.floor(Math.random() * winHgt);

        return rdmTop;

    }

    function randomLeft() {

        var winWdt = allElems.width();

        var rdmLt = Math.floor(Math.random() * winWdt);

        return rdmLt;

    }

});