Html JQuery移动图标在仅图标按钮中偏离中心

我想知道是否有人能帮我。在一个按钮中，我在按钮中放置了一个自定义图标（最终我将删除背景），但是由于更改了图标的大小，它现在偏离中心。有人能解释为什么会这样吗

.spot{
位置：绝对位置；
/*
背景色：透明！重要；
边界：0！重要；
-webkit盒阴影：无；
盒影：无；
*/
高度：140像素；
宽度：140px；
}
.图像支架{
显示：内联块；
位置：相对位置；
}
.形象{
位置：绝对位置；
}
.地点：之后{
背景图片：url（“img/spot.svg”）；
背景大小：100%；
宽度：60px；
高度：60px；
}

火山灰云

您需要覆盖：after伪元素的顶部和左侧边距

.spot:after {
    background-image: url("img/spot.svg");
    background-size: 100%;
    width: 60px;
    height: 60px;
    margin-top: -30px;
    margin-left: -30px;
}

---

您需要覆盖：after伪元素上的上边距和左边距

.spot:after {
    background-image: url("img/spot.svg");
    background-size: 100%;
    width: 60px;
    height: 60px;
    margin-top: -30px;
    margin-left: -30px;
}