CSS center any image in div

Question

Lets say I have div with width: 300px and height: 200px
I want any image inside this div to be centered both horizont

Answer 1

Add position: absolute to img and position: relative to div

.el {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: 50px 150px;
}
img {
  opacity: 0.4;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}