如何从父元素的中心缩放<i>标签？

Question

我试图将“真棒字体”图标悬停在其中心。但是每次我将其悬停时，它都会缩放并移动到右下角。

.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: scale(1.5);
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="field">
  <i class="fa fa-times"></i>
</div>

我希望这个Times图标从中心缩放。

Answer 1

只需使用字体大小：

.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 {
  font-size:120px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<div class="field">
    <i class="fa fa-times"></i>
</div>