How to center the image element inside the wrapping div

Question

The ScreenShots of the jsx and css code and that of the web page is given below.

[Why you should use code examples instead of images](https://meta.stackoverflow.com/a/285557/1377002). [Here's some documentation on how to create a React snippet](https://meta.stackoverflow.com/a/338538/1377002). — Andy, Jun 09 '23 at 15:25

score 0 · Accepted Answer · answered Jun 09 '23 at 15:41

Try giving the parent div a display flex and using the justify-content and align-items properties like this

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

.image {
  height: 100%;
}

How to center the image element inside the wrapping div

1 Answers1