How to vertically center an image inside of a div element in HTML using CSS?

if your image is purely decorative, then it might be a more semantic solution to use it as a background-image. You can then specify the position of the background

background-position: center center;

If it is not decorative and constitutes valuable information then the img tag is justified. What you need to do in such case is style the containing div with the following properties:

div{
    display: table-cell; vertical-align: middle 
}

Read more about this technique here. Reported to not work on IE6/7 (works on IE8).

This is a solution I've used before to accomplish vertical centering in CSS. This works in all the modern browsers.

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Excerpt:

  <div style="display: table; height: 400px; position: relative; overflow: hidden;">
    <div style="position: absolute; top: 50%;display: table-cell; vertical-align: middle;">
      <div style="position: relative; top: -50%">
        any text<br>
        any height<br>
        any content, for example generated from DB<br>
        everything is vertically centered
      </div>
    </div>
  </div>

(Inline styles for demonstration purposes)

There are five possible ways for centering an image with any size with pure CSS.

1. Using flex and making the img tag be inside (best solution for modern browsers):

   div {
       display: flex;
       align-items: center;
       justify-content: center
   }
   

2. Putting the image in background-image and using background-position (as @pixeline explained):

   div {
       background-image: url(...);
       background-position:center center
   }
   

3. Using display: table for parent element, and using display: table-cell with vertical-align: middle for child element:

   div.parent {
       display: table;
   }
   div.child {
       display: table-cell;
       vertical-align: middle;
   }
   

4. Using position:absolute with transform for the image and parent element position be not unset:

   div {
       position: relative;
   }
   div > img {
       position: absolute;
       left: 50%;
       top: 50%;
       transform: translate(-50%,-50%);
   }
   

5. Using line-height as same height of the element, then using vertical-align (in my opinion, the best solution for supporting more browsers like IE9>).

   Note: In some old browsers, sometimes for using this way safely, you need to have at least one character in the line that the image exist. For fixing this issue, I used a non-breakable space in a pseudo-element of the parent.

   As in the following example:

   div {
       display: block;
       height: 200px;
       width: 200px;
       background-color: purple;
       line-height: 200px;
       text-align: center;
   }
   div:after {
     content: "\a0";
   }
   div > img {
       vertical-align: middle;
   }

   <div><img src="https://via.placeholder.com/100.png/09f/fff" /></div>

I've posted about vertical alignment it in cross-browser way (Vertically center multiple boxes with CSS)

Create one-cell table. Only table has cross-browser vertical-align

In your example, the div's height is static and the image's height is static. Give the image a margin-top value of ( div_height - image_height ) / 2

If the image is 50px, then

img {
    margin-top: 25px;
}

Have you tried setting margin on the div? e.g.

div {
    padding: 25px, 0
}

for top and bottom. You may also be able to use a percentage:

div {
    padding: 25%, 0
}

The accepted answer did not work for me. vertical-align needs a partner so that they can be aligned at their centers. So I created an empty div with full height of the parent div but with no width for the image to align with. inline-block is needed for both objects to stay in one line.

<div>
    <div class="placeholder"></div>
    <img />
</div>

CSS:

.class {
    height: 100%;
    width: 0%;
    vertical-align: middle;
    display: inline-block
}
img {
    display: inline-block;
    vertical-align: middle;
}

If you want content to be what ever you need to have inside a div, this did the job for me:

<div style="
  display: table-cell;
  vertical-align: middle;
  background-color: blue;
  width: ...px;
  height: ...px;
">
    <div style="
      margin: auto;
      display: block;
      width: fit-content;
    ">
        <!-- CONTENT -->
        <img src="...">
        <p> some text </p>
    </div>
 </div>