How to center an image in css that is 90% of its parent height

Question

I want to center an image in the middle that has equal margin on all edges.

div {
    margin-top: 50px; 
    width: 40%; 
    box-shadow: 0 0 10px 0px rgb(0 0 0 / 8%); 
    height: 60vh; 
    overflow: hidden; 
 }

img { 
     object-fit: contain; 
     max-height: 55vh;
     width: 100%;
 }

Answer 1

You can center an element within another element with flexbox.

div {
  /* other styles */
  display: flex;
  align-items: center;
  justify-content: center;
}