Jquery 图像叠加的中心问题

我的脚本将图像src添加到覆盖的图像中，并在这个意义上正常工作。问题是当我创建变量

imgH

作为

margin top

的值时。我让它抓取图像的高度并分成两半

当一个值以.5结尾时，我遇到了问题，因此我使用

safeInt=Math.floor（iH），

删除该值的任何小数点

在我的投资组合中，居中是非常随机的，或者将0应用于叠加。我无法找出什么不允许变量正确地将图像居中

我对jquery稍有经验，因此如果这是一个新手错误，我深表歉意

以下是jQuery：

function imgOverlay() {
    $('.codeCont img').on('click', function() {
        var imgData = $(this).attr('data');

        $('.overlay').fadeIn().find('img').attr('src', imgData);

        if ($('.overlay img').attr('src') === 'images/vec-3.jpg') {
            $('.overlay').addClass('imgLong');
        }
        else {
            $('.overlay').removeClass('imgLong');
        }

        $('.close').on('click', function() {
            $('.overlay').fadeOut();
        });

        var iH = $('.overlay img').height()/2,
            safeInt = Math.floor(iH),
            imgH = "-" + safeInt + 'px';

        $('.overlay').css({
            'margin-top' : imgH
        });
    });
}

imgOverlay();

最后，一个提琴：-如果你从左到右浏览图像，你会在

页边空白顶部看到随机行为

下面是一个最清晰的问题。
在将图像加载到页面之前，您将获得图像的高度。您需要在图像的加载处理程序中执行计算并设置边距顶部，例如

function imgOverlay() {
   ...
   $('.overlay img').load(overlayLoad);
}

function overlayLoad()
{
   var iH = $('.overlay img').height()/2,
            safeInt = Math.floor(iH),
            imgH = "-" + safeInt + 'px';

    $('.overlay').css({
      'margin-top' : imgH
    });
}

你到底想做什么？为什么你试图将边距设置为覆盖层高度的一半？我试图获取覆盖层图像的高度，然后将其分成一半。然后将该数字作为负片
边距顶部
应用于覆盖，以使图像居中。