位置中心不是css中图像的左上角

Question

是否可以将中心定位在CSS的左上角？ 我有一个图像，顶部有其他图像（带点的地图）。背景图片的大小固定，我用css设置了顶部图像的位置：

#map {
 width: 700px;
 height: 700px;
 margin: auto;
 position: relative;
}
.point {
 position: absolute;
 left: 39.9%;
 top: 81.9%;
 z-index: 1;
}

点的大小是20x20px所以我从必要的位置减去10px然后转换为％。一切看起来都应该如此。

我正在努力使代码适用于较小的屏幕。我将宽度和高度更改为最大宽度和最大高度。现在背景适应较小的屏幕，但由于我在点的位置计算出的20px，屏幕越小，距离所需的位置越远。

我能想到的唯一解决方案是，如果我可以将点中心的位置设置为％，而不是左上角。可能吗？还有更好的方法吗？

Answer 1

left: calc(50% - 10px);
top: calc(50% - 10px);

或

left: 50%; margin-left: -10px;
top: 50%; margin-top: -10px;