How to find the element's x center coordinates and related window offset
You have to use offset()
to get the top and left position, then add half of the height()
and width()
values to them. That gives the center coordinates.
var $this = $(this);
var offset = $this.offset();
var width = $this.width();
var height = $this.height();
var centerX = offset.left + width / 2;
var centerY = offset.top + height / 2;
If you need to consider the padding property in your calculations, use the following:
var width = $this.outerWidth();
var height = $this.outerHeight();
This can now be done through native Javascript also:
let centerX = targetNode.offsetLeft + targetNode.offsetWidth / 2;
let centerY = targetNode.offsetTop + targetNode.offsetHeight / 2;
where targetNode is the element you want to get its center coordinates.