https://blog.hubspot.com/website/center-an-image-in-html#how-to-horizontally-center-an-image-in-css
Method 2. Using the Margin Property
Let’s say I have a very large image that I want to center. In that case, wrapping the image in a block element wouldn’t be the best option. Instead, I’d want to define the image with the CSS display property and set it to "block.”
Here’s how to center an image using the margin property:
I open up my CSS file.
I locate or create the img CSS selector.
Inside the style bracket, I can set the display property to block. This will tell the browser to treat the image as if it were a block element, not an inline element, thus allowing me to use the CSS margin property.
I can then set the width of the image to a fixed amount so it doesn’t span the viewport. In this case, I’ll use the percentage value of 60%, but you can also use pixels.
From there, I set the margin property to auto so that both horizontal margins are equal.
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.
-=-=-HTML
Centering an Image with the Margin Property
In this example, the CSS margin and display properties are used to center the image below.
Once the display property is set to "block" and the image width to a fixed percentage, the margins on the left and right are set to "auto." That means the remaining blank space of the viewport will be split equally on both sides.
-=-=-CSS
body {
margin: auto;
width: 640px;
padding: 50px;
font-family: 'Arial', sans-serif;
color: #33475b;
}
/* Centered Image Code */
img {
display: block;
width: 60%;
margin: auto;
}