How to center an image element inside a wrapping div

Question

Given below are the jsx and css codes and screenshots of the web page.

Answer 1

Try giving display Flex to the parent div and use justify-content and align-items properties like below

.movie_image {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 2px solid black;
}

.image {
  height: 100%;
}