CSS: Why “vertical-align: middle” does not work?

Question

Consider the following example: (live demo here)

HTML:

Answer 1

I had the same problem. This works for me:

 <style type="text/css">
    div.parent {
         position: relative;
    }

    /*vertical middle and horizontal center align*/
    img.child {
        bottom: 0;
        left: 0;
        margin: auto;
        position: absolute;
        right: 0;
        top: 0;
    }
    </style>

    <div class="parent">
        <img class="child"> 
    </div>

Answer 2

Not sure what's the cause.

Removing the line-height and adding margins to the image does the trick.

a {
  display: block;
  background: #f00;
}
img {
  margin: .3em auto;
  vertical-align: middle;
}

<a>
 <img src="https://placeimg.com/30/30/any">
</a>