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

HTML

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

CSS

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

absolute による要素の固定

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

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

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