Box要素の中で画像を中心に置きたいCSS

Box要素の中で画像を中心に置きたい場合。

HTML

<div class="box">
   <img class="centeringImage" src="./images/sampleImage.png" />
</div>
}

CSS

.centeringImage {
display:block;
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
max-width:50vw;
margin:auto;
}

position:absolute;
top:50%;
left:50%;
これだけだと画像の左上がBOXの中心に来るのでtransformで画像を50%ずらします。