Как изменить точку у элемента, относительно которой будет работать абсолютное позиционирование?

Question

[JackShcherbakov]

Есть скрипт:
https://codepen.io/CitizenOne/pen/gXONqJ
При клике на любое место синего прямоугольника, появляется красный квадрат в том месте, куда кликнули.
Проблема в том, что тут я использую абсолютное позиционирование, соответсвенно, при клике курсор будет не в центре красного квадрата, а в его левом верхнем углу(то есть левый верхний угол - точка у элемента, относительно которой будет работать абсолютное позиционирование по-умолчанию)
Как изменить точку с левого верхнего угла на центр?

Я решил эту проблему бонально путем вычитания половины ширины и высоты объекта из координат той точки, по которой был произведен щелчок. Возможно ли это как-то через CSS прописать?