Javascript 使用鼠标悬停在脚本上时居中图像弹出窗口

我在这个网站上找到了下面的鼠标悬停脚本，它工作得非常好，使用起来也很简单。它唯一的缺点是它放置图像的位置。图像放置在与courser相关的位置，并在移动鼠标时跟随它

问题：是否可以使图像显示在可见屏幕的中心并固定在那里？（只要鼠标在文本上，就固定在该位置。）

剧本

    var offsetX = 180;
    var offsetY = -25;
    $('a').hover(function(e) {
    var href = $(this).attr('href');    
$('<img id="largeImage" src="' + href + '" alt="big image" />')
.css('top', e.pageY + offsetY)
.css('left', e.pageX + offsetX)
.appendTo('body');
}, function() {
$('#largeImage').remove();
});

$('a').mousemove(function(e) {
$("#largeImage").css('top', e.pageY + offsetY).css('left', e.pageX + offsetX);
}); 

HTML

$（'a'）。悬停（函数（e）{
var href=$（this.attr（'href'）；
$('')
.附于（“主体”）；
}，函数（）{
$（“#大图像”）.remove（）；
});
$（'a'）.mousemove（函数（e）{}）
#大图像{
位置：固定；
填充：.5em；
背景：#e3；
边框：1px实心#bfbf；
颜色：#aa1416；
左：50%；
最高：50%；
}



    #largeImage {
position:absolute;
padding: .5em;
background: #e3e3e3;
border: 1px solid #BFBFBF;
color:#aa1416;
}

    <div class="largeImage">
    <li><h2><a id="item1"href="images/image6a.png">Breakfast Plates .....</a></h2>
    </div>