how to show div in center of screen using jquery

Html

<div class="loading" id="pageLoading" name="pageLoading" style="display: none;">
                <img src="/Images/loading.gif" alt="Loading....." />
 </div>

css

<style type="text/css">
.loading{
    z-index:10001;
}
.loading div{
    margin: auto 0px;
    text-align:center;
    vertical-align:middle;
}
</style>

script

<script type="text/javascript" language="javascript">
   function pageLoading()
   {
        var $loading = $(".loading");
        var windowH = $(window).height();
        var windowW = $(window).width();

        $loading.css({
            position: "fixed",
            left: ((windowW - $loading.outerWidth()) / 2 + $(document).scrollLeft()),
            top: ((windowH - $loading.outerHeight()) / 2 + $(document).scrollTop())
        })
        $("#pageLoading").toggle();
    }
</script>