スクリプト上にマウスを置いたときに画像のポップアップを使用する

Question

このサイトでマウスをスクリプトで見つけました。本当に使いやすくて使いやすいです。それの唯一の欠点は、画像を配置する場所です。画像は、コースターに関連して配置され、マウスが動かされるとそれに従います。

質問：画像を表示画面の中央に表示して固定することはできますか？ （限り、マウスをテキストの上にあるような位置に固定。）

スクリプト

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); 
}); 

これは、CSSスタイル

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

HTMLで

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

Answer 1

$('a').hover(function(e) { 
 
    var href = $(this).attr('href'); 
 
    $('<img id="largeImage" src="' + href + '" alt="big image" />') 
 
    .appendTo('body'); 
 
}, function() { 
 
    $('#largeImage').remove(); 
 
}); 
 

 
$('a').mousemove(function(e) {});

#largeImage { 
 
    position: fixed; 
 
    padding: .5em; 
 
    background: #e3e3e3; 
 
    border: 1px solid #BFBFBF; 
 
    color: #aa1416; 
 
    left: 50%; 
 
    top: 50%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="largeImage"> 
 
    <li> 
 
    <h2><a id="item1"href="images/image6a.png">Breakfast Plates .....</a></h2> 
 
</div>