如何使Font Awesome图标在hover时从父元素中心缩放？

我懂你遇到的困扰——hover时图标缩放后跑到右下角，这是因为transform属性是复合属性，新的transform会直接覆盖旧的，而不是叠加生效。

问题根源拆解 #

你给图标设置了初始居中样式：

.field i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 这个translate负责让图标居中 */
  /* ...其他样式 */
}

但hover状态下你只写了缩放：

.field .fa-times:hover {
  transform: scale(1.5); /* 这里的transform直接覆盖了之前的translate */
}

失去了translate的居中定位，图标自然就偏移到右下角了。

快速修复方案 #

把hover状态的transform改成同时包含translate和scale，这样就能在保持居中的同时实现缩放：

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<style>
.field { 
  height: 100px; 
  width: 100px; 
  border: 2px solid black; 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
}
.field i { 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  font-size: 70px; 
  transform-origin: center; 
}
.field .fa-times { 
  transition: 0.5s; 
  color: red; 
}
.field .fa-times:hover { 
  transform: translate(-50%, -50%) scale(1.5); /* 合并两个变换，保留居中+实现缩放 */
}
</style>
<div class="field">
<i class="fa fa-times"></i>
</div>

更简洁的优化写法（推荐） #

你也可以把居中逻辑交给父容器，让图标只负责缩放，彻底避免transform冲突：

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<style>
.field { 
  height: 100px; 
  width: 100px; 
  border: 2px solid black; 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  display: flex; /* 用flex实现容器内居中，代码更简洁 */
  align-items: center;
  justify-content: center;
}
.field i { 
  font-size: 70px; 
}
.field .fa-times { 
  transition: 0.5s; 
  color: red; 
  transform-origin: center;
}
.field .fa-times:hover { 
  transform: scale(1.5); /* 只需要写缩放即可，居中由父容器负责 */
}
</style>
<div class="field">
<i class="fa fa-times"></i>
</div>

这种方式把布局和动画逻辑拆分，代码更易维护，也不容易出现属性冲突的问题。

内容的提问来源于stack exchange，提问作者MareGraphics MaRe