How to center image [duplicate] - html

Question

This question already has answers here:
How can I horizontally center an element?
(133 answers)
Center image using text-align center?
(28 answers)
Closed 20 days ago.
I'd like to use flexbox to center the image. Can I do this without putting the picture in another div?
I think I tried all flexbox options but not sure, that's why I'm asking.
Here's some HTML and CSS code.
body {
font-family: sans-serif;
font-size: 10vw;
display: flex;
flex-direction: column;
background-color: grey;
word-wrap: break-word;
}
p {
text-indent: 5vw;
}
p.Intro {
/* See other colors # media queries */
}
Img.MainIMG {
max-height: 50vh;
max-width: 50vw;
display: flex;
align-items: center;
justify-content: center;
<main>
<H1>Hi!</H1>
<p class="Intro">
Lorem ipsum dolor sit amet.
</p>
<p class="Intro">
Sed ut perspiciatis unde omnis iste natus error.
</p>
<p class="Intro">
Lorem ipsum dolor sit amet.</p>
<img src="https://images.unsplash.com/photo-1530995377270-ac41692cd439?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzUwNzQzNDE&ixlib=rb-4.0.3&q=80" class="MainIMG" alt="Smiling person">
<H1>Goodbye!</H1>
</main>

Answer 1

transfer the image to a block-level element with display: block. Block level elements can be centered with margin: 0 auto:
body {
font-family: sans-serif;
font-size: 10vw;
display: flex;
flex-direction: column;
background-color: grey;
word-wrap: break-word;
}
p {
text-indent: 5vw;
}
p.Intro {
/* See other colors # media queries */
}
Img.MainIMG {
max-height: 50vh;
max-width: 50vw;
display: block;
margin: 0 auto;
}
<main>
<H1>Hi!</H1>
<p class="Intro">
Lorem ipsum dolor sit amet.
</p>
<p class="Intro">
Sed ut perspiciatis unde omnis iste natus error.
</p>
<p class="Intro">
Lorem ipsum dolor sit amet.</p>
<img src="https://images.unsplash.com/photo-1530995377270-ac41692cd439?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzUwNzQzNDE&ixlib=rb-4.0.3&q=80" class="MainIMG" alt="Smiling person">
<H1>Goodbye!</H1>
</main>

Answer 2

Yes you can. You can use margin: 0 auto property on the image and it will do the trick.
body {
font-family: sans-serif;
font-size: 10vw;
display: flex;
flex-direction: column;
background-color: grey;
word-wrap: break-word;
}
p {
text-indent: 5vw;
}
p.Intro {
/* See other colors # media queries */
}
img.MainIMG {
max-height: 50vh;
/* Make an image height 100% of parent div */
max-width: 50vw;
/* Make an image width 100% of parent div */
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto; /*add this*/
}
<main>
<H1>Hi!</H1>
<p class="Intro">
Lorem ipsum dolor sit amet.
</p>
<p class="Intro">
Sed ut perspiciatis unde omnis iste natus error.
</p>
<p class="Intro">
Lorem ipsum dolor sit amet.</p>
<img src="https://images.unsplash.com/photo-1530995377270-ac41692cd439?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzUwNzQzNDE&ixlib=rb-4.0.3&q=80" class="MainIMG" alt="Smiling person">
<H1>Goodbye!</H1>
</main>

Answer 3

Please change display:inherit style of image. Please add following style.
img.MainIMG {
max-height: 50vh;
/* Make an image height 100% of parent div */
max-width: 50vw;
/* Make an image width 100% of parent div */
display: inherit;
margin-left: auto;
margin-right: auto;
}