如何使用jQuery或JS实现图片的水平垂直居中定位

问题原因 #

• 定位计算基准错误：水平居中使用了整个文档宽度而非当前可见视口宽度，垂直居中错误使用1.5作为除数，不符合居中逻辑
• 宽高获取时机错误：刚插入DOM的图片还未加载完成，此时获取的弹窗宽高为未渲染完成的错误值，直接计算会导致定位偏移

配套基础CSS（若未预先配置需补充） #

#overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 999;
  display: none;
}
#magnify {
  position: fixed;
  z-index: 1000;
  display: none;
}

修正后完整JS代码 #

$(function(){
    $('.minimized').click(function(event) {
        var i_path = $(this).attr('src');
        $('body').append('<div id="overlay"></div><div id="magnify"><img src="'+i_path+'"><div id="close-popup"><i></i></div></div>');
        // 等待图片加载完成后再计算定位，保证宽高取值正确
        $('#magnify img').on('load', function() {
            $('#magnify').css({
                left: ($(window).width() - $('#magnify').outerWidth()) / 2,
                top: ($(window).height() - $('#magnify').outerHeight()) / 2
            });
            $('#overlay, #magnify').fadeIn('fast');
        });
    });

    $('body').on('click', '#close-popup, #overlay', function(event) {
        event.preventDefault();
        $('#overlay, #magnify').fadeOut('fast', function() {
            $('#close-popup, #magnify, #overlay').remove();
        });
    });
});

核心改动说明 #

• 将水平定位的计算基准从$(document).width()改为$(window).width()，取当前可见视口宽度作为计算基准，避免页面存在横向滚动条时定位偏移
• 将垂直定位的除数从1.5改为2，符合垂直居中的计算逻辑
• 新增图片加载完成监听，等图片渲染完成、弹窗尺寸稳定后再执行定位计算，避免获取到错误的宽高值
• 补充fixed定位的CSS配置，弹窗会始终相对于可见视口定位，页面滚动时也能保持居中

内容的提问来源于stack exchange，提问作者xFL0UD