https://blog.hubspot.com/website/center-an-image-in-html#how-to-horizontally-center-an-image-in-css
Method 3: Using the Flex Property
I can also center an image horizontally using the flex property, which doesn’t require margin calculations.
how to center an image in css, flex
Here's how:
In my HTML file, I start by looking for the image I want to center.
From there, I set the width of the image to a fixed length value, i.e .
I can then wrap the image in a div element. I also have the option of giving the div an ID or class. That way, the centering code only applies to this one specific instance and not to all divs.
Next, I open up my CSS file.
I can then find my div selector or write out my ID or class selector (#example or .example).
Inside the curly brackets, I set the display property to flex, which tells the browser that the div is the parent container and the image is a flex item.
Then, I set the justify-content property to center.
Here's the CSS with the result:
Try it yourself! The code module above is editable. Toggle between the HTML and CSS tabs, edit the code, and click rerun in the bottom right-hand corner.
Click on the HTML button to see the HTML code as well.
Pro tip: As previously mentioned and speaking from personal experience, I encourage you to give an ID selector to your div and use the selector in your CSS code. That way, all divs on your website aren’t affected.
https://www.youtube.com/watch?v=PFfAuNGarYk
-=-=-HTML
In this example, the CSS flex property is used to center the image below.
The image is wrapped in a div element. The display property is set to "flex" and justify-content property to "center." The width of the image is then set to a fixed length value.
-=-=-CSS body { margin: auto; width: 640px; padding: 50px; font-family: 'Arial', sans-serif; color: #33475b; } /* Centered Image Code */ div { display: flex; justify-content: center; } -=-=-