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 控制台中对此进行了测试，它似乎有效。