HTML 元素稍微偏离中心

Question

我使用带有自定义 div 元素的 Leaflet Marker Cluster 插件来表示一个簇图标。本地图上的一组标记被聚类时，一个聚类图标会出现在它们的位置。将鼠标悬停在集群图标上会在 map 上显示一个多边形形状，指示集群图标覆盖的区域。我希望图标位于多边形的中间。但是，它们似乎都位于中心的右下角。这是一张图片来说明我的意思。黑色线条表示多边形，多边形中间的红线和蓝色圆圈是集群图标。

Pic below :

在我的应用程序中，它们的蓝色圆圈都略微位于中心的右下角。我的集群图标的 CSS 是:

.marker-cluster-div {
    width: 40px;
    height: 40px;
    font-size: 12px;
    border-radius: 50%;
    color: black;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    line-height: 40px;
}

有没有什么简单的方法可以让元素从它最初定位的位置向左和向上移动？

Answer 1

确保 .marker-cluster-div 的父元素具有相对位置并应用此 css:

.marker-cluster-div {
    position: absolute;
    width: 40px;
    height: 40px;
    top: 50%;
    margin-top: -20px;
    left: 50%;
    margin-left: -20px;
    font-size: 12px;
    border-radius: 50%;
    color: black;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    line-height: 40px;
}