Hover 圖像未居中（CSS + JS）

Question

在以下解決方案中，我似乎無法將出現在 hover 的圖像置於屏幕中央。

我該如何解決這個問題？ 這是 CSS position問題還是可以在 JS 中解決？

https://jsfiddle.net/Mengolor/2wzv6tr1/1/

div {
    position: relative;
    border: 1px solid gray;
    border-radius: 6px;
    width: 600px;
    height: auto;
    top: 250px;
    left: 100px;
}

img#image {
    position: absolute;
    display: none;
    z-index: 99;
    max-width: 50vw;
  transform: translate(-50%, -50%);
}

h3 {
  padding: 40px;
}

span:hover img#image {
    display: block;
  pointer-events: none;
}

$(document).mousemove(function(e){
        const { scrollTop, scrollLeft } = document.documentElement;
    $("#image").css({left:e.clientX + scrollLeft, top:e.clientY + scrollTop});
});

Answer 1

不要讓您的 position 屬性相對，而是嘗試 position:center;

 div { position: center; border: 1px solid gray; border-radius: 6px; width: 600px; height: auto; top: 250px; left: 100px; }

我在 JSFiddle 控制台中對此進行了測試，它似乎有效。