Div not centering well
Hi I am trying to create a lightbox efect for my website and I seem to have a problem with centerint the image here is my code:

    <div id="lightbox">
        <img src="img/accrington-stanley.jpg" alt="Accrington Stanley" class="lightboximg"/>
        <img src ="img/fancy_close.png" alt="close" id="close"/> 
    </div>
      jQuery.fn.center = function () {
          this.css("position","absolute");
          this.css("top", Math.max(0, (($(window).height() - this.outerHeight()) / 2) + 
                                                $(window).scrollTop()) + "px");
  
          this.css("left", Math.max(0, (($(window).width() - this.outerWidth()) / 2) + 
                                                $(window).scrollLeft()) + "px");
          return this;
      } 

       var lightbox = $('div#lightbox');
                var lightboxbg = $('div#bg-lightbox');
                var close =  $("img#close");
                var lightboximg = $('img.lightboximg');

      portfolio.on("click","li" ,function(){
                    lightbox.center();
                    var curent = $(this).attr("data-id");
                   
                    for(var i=0;i<arr.length;i++){
                        var obj = arr[i];
                        for(var key in obj){
                        var attrName = key;
                        var attrValue = obj[key];

                        if(curent === attrValue){

                            for(var index in obj){
                                    var attrName2 = index;
                                    var attrValue2 = obj[index];

                                    if(attrName2 === "img"){
                                        lightboximg.attr("src" , attrValue2);    
                                    }     
                          }
                        }
                      }
                    }


                    $("body").css('overflowY','hidden');
                    close.css({
                        top:-30,
                        right:-30
                    })
                    lightboxbg.css({
                        "top": $(window).scrollTop(),
                        "left":"0",
                        "opacity":"0.8"
                    }).fadeIn();
                    lightbox.center().fadeIn();


                })

The source of the img.lightboximg changes on each click and thus the container width and height changes acording to the image size.The container doesn't center on the first click , but it centers on the second.The two loops are used only to change the src on img.lightboximg.

Another thing I don't understand is if I try to get the width and height of lightboximg variable it always returns 0.Why is that?
Can anyone tell me what is wrong with my code and how to corect it in order to center div#lightbox?
Div not centering well
===

Hi I am trying to create a lightbox efect for my website and I seem to have a problem with centerint the image here is my code:

    <div id="lightbox">
        <img src="img/accrington-stanley.jpg" alt="Accrington Stanley" class="lightboximg"/>
        <img src ="img/fancy_close.png" alt="close" id="close"/> 
    </div>
      jQuery.fn.center = function () {
          this.css("position","absolute");
          this.css("top", Math.max(0, (($(window).height() - this.outerHeight()) / 2) + 
                                                $(window).scrollTop()) + "px");
  
          this.css("left", Math.max(0, (($(window).width() - this.outerWidth()) / 2) + 
                                                $(window).scrollLeft()) + "px");
          return this;
      } 

       var lightbox = $('div#lightbox');
                var lightboxbg = $('div#bg-lightbox');
                var close =  $("img#close");
                var lightboximg = $('img.lightboximg');

      portfolio.on("click","li" ,function(){
                    lightbox.center();
                    var curent = $(this).attr("data-id");
                   
                    for(var i=0;i<arr.length;i++){
                        var obj = arr[i];
                        for(var key in obj){
                        var attrName = key;
                        var attrValue = obj[key];

                        if(curent === attrValue){

                            for(var index in obj){
                                    var attrName2 = index;
                                    var attrValue2 = obj[index];

                                    if(attrName2 === "img"){
                                        lightboximg.attr("src" , attrValue2);    
                                    }     
                          }
                        }
                      }
                    }


                    $("body").css('overflowY','hidden');
                    close.css({
                        top:-30,
                        right:-30
                    })
                    lightboxbg.css({
                        "top": $(window).scrollTop(),
                        "left":"0",
                        "opacity":"0.8"
                    }).fadeIn();
                    lightbox.center().fadeIn();


                })

The source of the img.lightboximg changes on each click and thus the container width and height changes acording to the image size.The container doesn't center on the first click , but it centers on the second.The two loops are used only to change the src on img.lightboximg.

Another thing I don't understand is if I try to get the width and height of lightboximg variable it always returns 0.Why is that?
Can anyone tell me what is wrong with my code and how to corect it in order to center div#lightbox?