jquery - Div 没有很好地居中

Question

您好，我正在尝试为我的网站创建灯箱效果，但我似乎对 centerint 有问题，这里的图像是我的代码:

<div id="lightbox">
    <img src="img/accrington-stanley.jpg" alt="Accrington Stanley" class="lightboximg"/>
</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 lightboximg = $('img.lightboximg');

  portfolio.on("click","li" ,function(){
                var curent = $(this).attr("data-id");
                for(var i=0;i<arr.length;i++){
                    if(curent === attrValue){
                        for(var index in obj){
                                var attrName2 = index;
                                var attrValue2 = obj[index];
                                if(attrName2 === "img"){
                                    lightboximg.attr("src" , attrValue2);    
                                }     
                  }
                }

                lightbox.center().fadeIn();


            })

img.lightboximg 的来源在每次单击时都会发生变化，因此容器的宽度和高度会根据图像大小而变化。容器不会以第一次单击为中心，而是以第二次单击为中心。这两个循环是仅用于更改 img.lightboximg 上的 src。

另一件事我不明白的是，如果我尝试获取 lightboximg 变量的宽度和高度，它总是返回 0。为什么会这样？谁能告诉我我的代码有什么问题以及如何纠正它以使 div#lightbox 居中？

编辑:arr是一个包含多个对象的数组。在每个对象中我存储了src和其他参数

编辑:我在尝试使代码工作时发现了一些非常奇怪的东西。如果我在点击处理程序中添加一个警报框，容器就会居中，这与什么相关？

Answer 1

CSS 方法怎么样？

.lightbox {
      position:absolute;
      left:50%;
      top:50%;
      width:300px;
      height:200px;
      margin-top:-100px;
      margin-left:-150px;
 }