Html 在css中定位图像的中心而不是左上角

是否可以在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，屏幕越小，点离所需位置越远

我能想到的唯一解决办法是，如果我能用%而不是左上角设置点中心的位置。可能吗？有更好的办法吗

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

或

---

很有效，谢谢。有没有办法解决这个问题，使点的大小也成比例地减小？您可以使用vw和vh单位使点的宽度和高度与窗口宽度和高度成比例（1vw表示窗口宽度的1%，1vh表示窗口高度的1%）。但是，在计算中的边距或px中，必须使用设置为图像宽度和高度的值的一半。

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