Q:

How to set mouseposition to 0,0 in the center of the element?

I'm trying to set the coordinates as shown in the top left to 0% and 0% when the cursor is on the red cross (absolute middle of element).
Going left should make the X-axis go negative. Same goes for the Y-axes when i go up. Going right/bottom should contain positive values.
As you can see in the image, the coordinates are now 50% and 50%.
A codepen to this snippet can be found @ https://codepen.io/michaelkoelewijn/pen/RVGmKN
let pageY = e.pageY - this.offsetTop;
let pageX = e.pageX - this.offsetLeft;
let percY = ((pageY / elHeight) * 100);
let percX = ((pageX / elWidth) * 100);

I'm sure my formula for calculating the percentages is incorrect but i can't seem to find my answer anywhere. Does anyone have the golden answer i'm looking for?
Thanks!

A:

Your formula for percentages is correct.  However this.offsetTop and this.offsetLeft are defined in the HTML specification to be measured from the top-left of the element, so the 0%, 0% coordinate is at the top-left of the box.
To do what you want, you can just subtract 50% from percX and percY:
let pageY = e.pageY - this.offsetTop;
let pageX = e.pageX - this.offsetLeft;
let percY = ((pageY / elHeight) * 100) - 50;
let percX = ((pageX / elWidth) * 100) - 50;

EDIT (if you want the range to be from -100% to 100%)
Just multiply percX and percY by 2:
let pageY = e.pageY - this.offsetTop;
let pageX = e.pageX - this.offsetLeft;
let percY = (((pageY / elHeight) * 100) - 50) * 2;
let percX = (((pageX / elWidth) * 100) - 50) * 2;

