Dynamic Center Alingment

by Santosh Thakur

HTML

<div class="box"></div>
<button>Click Function</button>

CSS

.box {
    border:1px solid red;
    width:300px;
    height:100px;
    background:#FFCC00;
    position:absolute;
    top:33px;
}

JavaScript

(function () {
    $('.box').hide();
    var box = $('.box');
    var h = $(window).height() / 2 - box.outerHeight() / 2;
    var w = $(window).width() / 2 - box.outerWidth() / 2;
    $('button').on('click', function () {
        $('.box').show();
        box.animate({
            'left': w,
                'top': h
        }, 500);

    });
})();