HTML
<link rel="stylesheet" type="text/css" href="../css/vertical2.css">
<div class="container">
  <div class="img-container">
    <img src="https://images.unsplash.com/photo-1686121103438-04525a505750?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2370&q=80"
         alt="random picture"
    />
  </div>
</div>






<!-- 

https://blog.hubspot.com/website/center-an-image-in-html#how-to-horizontally-center-an-image-in-css
-=-=-
https://www.youtube.com/watch?v=PFfAuNGarYk
-=-=-



How to Vertically Center an Image in CSS
Centering any element vertically is more difficult than horizontally, but it’s still doable. For the demos below, I’m going to use internal CSS.



CSS

.container{
  border: 2px solid black;
  height: 500px;
  margin: auto;
  width: 50%;
}

.img-container{
  background-color: #eeeadc;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px;
}

img{
  object-fit: cover;
  height: 300px;
}

Method 1. Using the Position Property
To center an image vertically, I can wrap it in a block element like a div and use a combination of the CSS position property, the left and top properties, and the transform property.

how to center an image in css, position

Here's how:

In my HTML file, I locate the image you want to center, then wrap the image in a div element.
In my CSS file, I find my div selector or write out my ID or class selector (#example or .example).
Inside the curly brackets, I set the position property of the div to absolute so that it’s taken out of the normal document flow.
I set the left and top properties to 50%. This tells the browser to line up the left and top edge of the div containing the image with the center of the page horizontally and vertically (i.e., 50% to the right and down the page).
Here’s the problem: having the edges of the div lined up in the middle of the page will make the div look off-center. That’s where the CSS transform property comes in. To truly center the div containing the image, I can use the translate() method to move the div along the X- and the Y-axis.

Here's how:

I set the transform property to translate(-50%, -50%).
This moves the div 50% to the left and up from its current position so that the center of the image lines up with the center of the page.
Next, I set the -ms-transform property to translate(-50%, -50%). To move left and up, I’ll need to use negative values, which is what I’ve done with this step.
Here’s the CSS:


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.

Method 2. Using the Flex Property
Just like I did earlier when I centered an image horizontally, I can use the flex property to center images vertically.

Here's how:

In my HTML file, I find the image I want to center.
I set the width of the image to a fixed length value, i.e., <img width=“400”>.
I wrap the image in a div element.
In my CSS code, I can then find your div selector.
Inside the curly brackets, I set the display property of the div to flex.
I set the align-items and justify-content properties to center. This will tell the browser to center the flex item (the image within the div) vertically and horizontally.
Then, I set the height of the div container to a proportionate height.
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.

Pro tip: If you have other items in the flex container but only want to center the image specifically, take advantage of the align-self property. All you have to do is make a separate selector in your CSS and apply it to the img tag in your HTML.

How to Center an Image in Bootstrap
I also can vertically and horizontally center an image in Bootstrap CSS, which is one of my favorite frameworks to use. It has a series of handy, premade CSS classes to help me style my web pages.

All I need to do is add the mx-auto class to my image. This will automatically set the horizontal margin of the image to auto, centering the image.

Here's how:

In my HTML file, I can locate the image I want to center.
I then add the mx-auto class to the image tag, i.e., <img src=“image.jpg” class=“mx-auto”>.
You're actually done! But if I want to also center the image vertically, I can take the following steps.

I wrap the image in a div element.
I can then add the d-flex and align-items-center class to the div, i.e., <div class=“d-flex align-items-center”>.
The “d-flex” class declares that the parent div is a flexible container, and the “align-items-center” class centers the image vertically inside the div. This works similarly to CSS Flexbox.

Here’s the HTML 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.

Pro tip: Use developer tools such as Chrome Dev Tools to inspect your page and verify the class being assigned to the element is correct.

Here’s how to do this:

Open Google Chrome.
Right-click on the page and select inspect.
Find the elements tab and click the element with the appropriate class name.
Finally, verify the properties for the class under the styles tab to double-check its values.

Free Guide: 25 HTML & CSS Coding Hacks
Tangible tips and coding templates from experts to help you code better and faster.

Coding to Convention
Being Browser-Friendly
Minimizing Bugs
Optimizing Performance
Download for free
Learn more
Are images inline or block elements in HTML?
As you can see, the centering process isn’t difficult, but it varies depending on whether the elements are inline or block.

There are a few differences between these element types, but the major difference is how they affect the flow of a page. It's important to understand this concept if you want to center elements beyond images.

Block elements work by breaking the flow of a page, whereas inline elements work by going with the flow.

Block elements start on a new line and take up the full width of the viewport (or the width of the page). Inline elements, on the other hand, occupy the space allotted by their HTML tags, allowing them to go with the “flow” of the page as opposed to interrupting it. Of course, the width and style of these elements vary depending on the CSS code for that HTML tag.

Here’s an example to help visualize these differences.

Below, I used a Bootstrap button styled as an inline element and a block element.

how to center an image in css, inline block

The inline button would need special code to be aligned to the center, while the block button would simply need some adjustments in width or padding.

Tldr: Block and inline elements require different methods for aligning them to the center. For instance, when I center a div (which is a block element), you might use margin and padding or other methods.

However, you cannot use these methods when centering images.

That’s because images are inline elements and go with the flow of the page. Like the inline button above, you’ll need to use special code to place it in the center of the page.

Should you center images with internal, external, or inline CSS?
To center an image, you’ll need to use CSS, as we've already seen. But you have several options: internal CSS, external CSS, or inline CSS.

Internal CSS is placed in the <head> section of a webpage, while external CSS is located in an external stylesheet that’s then linked in the <head> section. Inline CSS, on the other hand, is embedded in the HTML code in the <body> section. The CSS is defined within the “style” attribute of the element being targeted.

Generally, it’s recommended to keep your HTML separate from your CSS, but any of these methods will render the same result. If you can’t separate them for some reason — maybe the website-building platform you’re using keeps them together in the source code editor, for example — then you’ll have to use inline CSS.

The good news is that the syntax for inline CSS is similar to that of internal and external CSS. The property is named and given a property value, but the rule set is enclosed by apostrophes rather than brackets.

Here’s an example of inline CSS in action. Let’s say you want to change the text color of the first header on your page and leave the other headers as is. You’d set the color property to the hex color code you prefer, place it within the style attribute, and place the whole thing inside the H2 tag.

Check it out below:


How does this compare to internal CSS? Let’s say you wanted to use that same CSS but place it in the head section between <!--<style> tags.
You’d replace the “style=” attribute in your HTML with a CSS selector. A CSS selector is a name that you use to identify an HTML element. You then use this name in the CSS file to design the look and feel of that element.

Note: In the example below, an  ID selector is used, but you could also use a CSS class.


This is also how the CSS would look in an external stylesheet. You would link to the external stylesheet between the "head"> tags of your page. Check out an example of an external stylesheet below with the same result:


How to center an Image using Hubspot CMS
If you are using a CMS like Hubspot Content Hub to design your pages, you can easily center your images using the layout editor.

Here’s a preview of what that looks like:



The picture above shows the image module in the inspector, which allows you to edit or add components to a template or module. To center the image, add the CSS text-align: center in the Inline styling field.

Using HTML and CSS When Centering an Image
With a bit of coding knowledge, you can bring a sense of symmetry and balance to your site with center-aligned images, texts, and buttons. Knowing how to align these elements will help you control and customize your layouts for a professional look that your website visitors will enjoy. -->