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

Answer 1

To vertically center your div, you can use positioning. Just apply

position: relative;
top: 50%;
transform: translateY(-50%);

to your image, and it will be vertically centered.

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

.test>img {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}