Center image in HTML DIV horizontally

First Part is the CSS

Somebody once said "I have an img in a div and I want this image to be exactly in the middle of the div but nothing I try works..."
Suppose you want to place 2 images side by side and centered in their div elements. you need to edit your style sheets to have an outer div, and 2 inner divs, and an image element inside the inner divs. You need to set your margin sides to auto, and your width to 50%

div.column-2-block {
  position:relative;
  float: left;
  display:inline-block;
  border: 0px red solid;
  margin-top:25px;
}
div.column-inside {
  position:relative;
  float: left;
  display:inline-block;
  border: 0px green solid;  
  width:50%;
}
div.image-holder {
  position:relative;
  display:block;
}
// THIS CSS WILL MAKE IT CENTERED
img.centered {
  margin:0 auto;
  width:50%;
}

Then the HTML code

<div class="column-2-block">
<div class="column-inside">
<img class="centered" src="https://cdn.shopify.com/s/files/SOS.png" width="320">
</div>
<div class="column-inside">
<img class="centered" src="https://cdn.shopify.com/s/files/watch.jpg" width="400">
</div>
</div>

The Result