Html 当我点击社交媒体图标时，图标中的徽标向上移动

我的社交媒体按钮有问题，因为某种奇怪的原因，当我点击它时，里面的文本会向上滑动

当我点击这个图标时，圆圈内的“f”向上移动了几个像素。仅在单击时发生。当我释放它时，它经过中心

<div class="social-buttons">  
<a href="https://www.facebook.com/sharer/sharer.php?u=https://test.com/foundation-level-it-professional-certification/" target="blank" class="social-margin" rel="noopener noreferrer"> 
<div class="social-icon facebook">
<i class="fa fa-facebook" aria-hidden="true"></i> 
</div>
</a>


.social-buttons{
 display: flex;
  align-items: center; /* flex vertical alignment */
  justify-content: space-evenly;
}

.social-icon {
  margin-bottom: 15px;
   box-sizing: border-box;
  -moz-border-radius: 138px;
  -webkit-border-radius: 138px;
  border-radius: 138px;
  border: 5px solid;
  text-align: center;
  width: 50px;
  height: 50px;
  display: inline-block;
  line-height: 1px;
  padding-top: 11px;
  transition: all 0.5s;
}

.social-icon-no-border {
  margin-bottom: 15px;
     box-sizing: border-box;
  -moz-border-radius: 138px;
  -webkit-border-radius: 138px;
  border-radius: 138px;
  text-align: center;
  width: 50px;
  height: 50px;
  display: inline-block;
  transition: all 0.5s;
}

.social-icon:hover {
    transform: rotate(360deg)scale(1.3);
  }

.social-icon-no-border:hover{
        transform: rotate(360deg)scale(1.3);
}

.社交按钮{
显示器：flex；
对齐项目：居中；/*柔性垂直对齐*/
对正内容：空间均匀；
}
.社会偶像{
边缘底部：15px；
框大小：边框框；
-moz边界半径：138px；
-webkit边界半径：138px；
边界半径：138px；
边框：5px实心；
文本对齐：居中；
宽度：50px；
高度：50px；
显示：内联块；
线高：1px；
填充顶部：11px；
过渡：均为0.5s；
}
.社交偶像无国界{
边缘底部：15px；
框大小：边框框；
-moz边界半径：138px；
-webkit边界半径：138px；
边界半径：138px；
文本对齐：居中；
宽度：50px；
高度：50px；
显示：内联块；
过渡：均为0.5s；
}
.社交图标：悬停{
变换：旋转（360度）比例（1.3）；
}
.社交图标无边框：悬停{
变换：旋转（360度）比例（1.3）；
}

我想这就是你想要的

。社交按钮{
显示器：flex；
对齐项目：居中；/*柔性垂直对齐*/
对正内容：空间均匀；
}
.社会偶像{
边缘底部：15px；
-moz边界半径：50%；
-webkit边界半径：50%；
边界半径：50%；
边框：5px纯蓝色；
显示：内联flex；
文本对齐：居中；
宽度：50px；
高度：50px；
字体大小：50px；
过渡：均为0.5s；
}
.社交图标：悬停{
变换：旋转（360度）比例（1.3）；
}

经过多次尝试和错误，罪魁祸首是边境。有一次我注释掉了

border:5px solid，然后解决了问题。
秤似乎偏离中心。删除“缩放”命令时是否仍会发生这种情况？