Hover image not centred (CSS + JS)

Question

In the following solution, I can't seem to be able to centre to the screen the image appearing at hover.

How can I solve this? Is this a CSS position issue or can be resolved in 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

Instead of making your position attribute relative, try position:center;

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

I tested this in the JSFiddle console, and it seemed to work.