如何使用jquery或js将图像水平和垂直对齐？

Question

目前，我有以下代码：

$(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').css({
            left: ($(document).width() - $('#magnify').outerWidth())/2, //its not true
            top: ($(window).height() - $('#magnify').outerHeight())/1.5 //its not true
        });
        $('#overlay, #magnify').fadeIn('fast');
    });

    $('body').on('click', '#close-popup, #overlay', function(event) {
        event.preventDefault();

        $('#overlay, #magnify').fadeOut('fast', function() {
            $('#close-popup, #magnify, #overlay').remove();
        });
    });
});

我不明白，在顶部和左边需要替换什么。

Answer 1

只有当图像已加载并且发生绘制循环时，才能知道图像的尺寸。因此，在调整包装器元素之前，请等待该循环发生：

requestAnimationFrame(() => { // called just before next paint
    requestAnimationFrame(() => { // called one paint cycle later
        $('#magnify').css({
            left: ($(document).width() - $('#magnify').outerWidth())/2,
            top: ($(window).height() - $('#magnify').outerHeight())/1.5
        });
    });
});