如何通过中心点指定图像标签的位置

Question

我有一个较大的图像，上面有多个较小的图像标签(地图上有点)

现在我在父元素

中使用top和left属性指定一个点的位置

<div className='img-c' style={{ top: "12%", left: "60%" }}><img src={windowIcon} id="1x03" className="planF " /></div>

当调整窗口大小时，地图也会缩放，地图上的点不会，所以它仍然是可点击的。然而，由于它们固定在左上角(我猜)，看起来它们在地图上移动，所以我想知道如何定义中心点的方法。

我正在使用Javascript React，如果这很重要

Answer 1

尝试用'display: flex;'， 'justify-content: center;' and 'align-items: center;'来代替image parentdiv.