How to scale tag from the center of It's parent element?

Question

I'm trying to make an Font Awesome icon scale from the center when hovered over it. But every time I hover it, it scales and moves to the bottom right corner.

.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>

I expect this Times icon to scale from the center.

Fonts are not squares with equal sides so finding the center is mostly trial and error. The main properties to adjust are `line-height`, `text-align`, and `transform-origin`. See my [post](https://stackoverflow.com/a/54671435/2813224). — zer00ne, Feb 19 '19 at 11:02

score 1 · Accepted Answer · answered Feb 19 '19 at 11:04

Simply use font size:

.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>

How to scale tag from the center of It's parent element?

1 Answers1