あれ？上手く中央に寄せられないな、という場合でもとにかくこれで強引に中央寄せ出来ちゃいます。

もうこれ大好き。

親のboxにrelativeをかけて、子の要素（imgでなくてもOK）にabsoluteをかけます。

topとleftを50%にした上でtransformでさらに-50%ずつ、でバッチリ中央に。

ベンダープレフィックスは4バージョン前の（2019年4月現在）-webkit-transformと-ms-transformをとりあえずかけておけばよいかなーと思います。

 

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

【ベンダープレフィックス参考】

https://autoprefixer.github.io/