transformプロパティを使って要素を上下中央に配置する

HTML

index.html

<div class="box>
  <img src="dummy.png" alt="" width="24" height="24" class="img" >
</div>

CSS

app.css

.box {
   position:relative;
   height:300px;
}
.img {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

absolute による要素の固定

absolute による要素の固定は赤い丸の点
左上を起点としているので、left: 50% Top:50%ではこの位置になる。
これではBox要素に対して上下中央ではないので、

app.css

transform: translate(-50%, -50%);

translate(X方向の距離, Y方向の距離)
translate()関数では、X方向とY方向の距離で2D移動を指定します。 Y方向の距離は省略することができますが、この場合のY方向の距離は0となります。[tx, ty]
translateX(X方向の距離)
translateX()関数では、X方向の距離で移動を指定します。
**`translateY(Y方向の距離)
translateY()関数では、Y方向の距離で移動を指定します。