Modal in center with animation

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">
<script src="http://www.theok.gr/js/velocity.min.js"></script>
<ul class="elements">
    <li>01</li>
    <li>02</li>
    <li>03</li>
    <li class="openMe">04</li>
    <li>05</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;
    width:auto;
    height:auto;
    left:-100px;
    right:-100px;
    max-width:100px;
    max-height:100px;
    padding:0;
    cursor:pointer;
    text-align:center;
    color:#dfdfdf;
    background:#fff;
    font:bold 70px/100px Arial;
    border-radius:50px;
    transition:margin .3s linear, max-width .3s linear, max-height .3s linear, line-height .3s linear, border-radius .15s linear, left .3s linear, top .3s linear;
}
li:hover {
    z-index:1;
    border-radius:0;
    margin-top:-20px;
    margin-left:-20px;
    max-width:140px;
    max-height:140px;
    line-height:140px;
    
}
li:before, li.openMe:after {
    content:"";
    display:block;
    width:100%;
    height:100%;
    left:0;
    top:0;
    background:#000;
    position:fixed;
    opacity:0;
    visibility:hidden;
    z-index:-1;
    transition:opacity .3s linear, visibility .3s linear
}
li.openMe:before {
    visibility:visible;
    opacity:.2;
}
li.openMe:after {
    position:absolute;
    background:#fff;
    z-index:-1;
    opacity:1;
    visibility:visible
}
li.openMe {
    left: 10%!important;
    right: 10%;
    width:auto;
    max-width: 1000px;
    top: 5%!important;
    height:auto;
    max-height:90%;
    line-height:140px;
    margin:0 auto;
    border-radius: 0;
    cursor:default;
    z-index:1;
}

JavaScript

$(function () {

    var allElems = $('.elements');

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

        $(this).css({
            'left': randomLeft() + 'px',
                'top': randomTop(this) + '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;

    }

});