How to center an image in the middle of a div? [duplicate]

Answer 1

It is really easy if you can give image as background to div

.test {
  background-color: orange;
  width: 700px;
  height: 700px;
  text-align: center;
  background-repeat: no-repeat;
  background-position: center center;
}

If you dont want to use inline style you can do

  


.test > img{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
.test{position: relative}