CSS vertical align [duplicate]

Question

I have a img in floated div and I don't know how to center it vertically.

<div style="height: 300px">
   <img style="height: 50px" src="something" />
</div>

vertical-align: middle of course doesn't work.

http://jsfiddle.net/wKQYj/

Answer 1

Use the translate property, it's simple and works even in IE:

img {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Answer 2

To vertically-align text within a parent element, and bear in mind that an img is an inline-element and so behaves similarly to text, you can simply set the line-height to the height of the parent element:

div {
    height: 300px;
    line-height: 300px;
}

JS Fiddle demo.