How to align an image in a block to the center?

Question

css

Hello. There is a 160*160 block containing a 160*250 widescreen image.

<div id="minibox">
    <img src="img/1.jpg" class="box">
  </div>

.box {
  height:100%;
}

#minibox {
  overflow:hidden;
  width:160px;
  height:160px;
}

This image is aligned to the left side of the minibox and the remaining 90px is hidden. I need the image to be center aligned i.e. 45px were hidden on the left and right, and in the block I saw the center of the image. I don't know what to do... Tell me what to do?
PS Image parameters (160 * 250) I gave as an example. In fact, I have a lot of widescreen images that have different parameters...

Answer 1

#minibox{text-align:center}

Answer 2

Make an image the background, the easiest solution.
I would still suggest that you correct the engine template. If you insist on using img, then on the server or on the client, change the margin-left of each image. Here is an example for a js client (+jq)
codepen.io/iiil/pen/EGFns

Answer 3

#minibox {
  overflow:hidden;
  width:160px;
  background: url(../img/1.jpg);
  height:160px;
  background-size: cover;
  background-position:center;
}

yes, I did it, but the code is written for the engine and I need img in html, not background in css

Answer 4

There is another solution but in below 9 ie not working

.box {
  display:block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

#minibox {
  position: relative; 
  overflow:hidden;
  width:160px;
  height:160px;
}