css center image in div

//HTML
<div class="parent">
	<span>Hello World</span>
</div>

//CSS
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

IMG.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto }
 ...
<IMG class="displayed" src="..." alt="...">

.centerImg {
  display: block;
  margin: 0 auto;
}

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

img { display:block;
      margin-left: auto;
      margin-right:auto;
      } 
     

.parent {
  position: relative;
}
.child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

<div style="width: 300px; height: 300px;">
  <img src="./image.png" class="center">
</div>

.center{
  object-fit: scale-down;
  max-width: 100%;
  max-height: 100%;
  height: 15em; /*set your constraint to height/width and set the other to auto*/
  width: auto; 
}

.center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

text-align: center

  <div class="row">
  <div class="column">
    <img 
  src="img_snow.jpg" alt="Snow" style="width:100%">
  </div>
  
  <div class="column">
    <img src="img_forest.jpg" 
  alt="Forest" style="width:100%">
  </div>
  <div 
  class="column">
    <img src="img_mountains.jpg" 
  alt="Mountains" style="width:100%">
  </div>
</div>