Vertically center elements

Vertically center elements larger than the parent

A common problem in web design is aligning elements vertically. There are already solutions out there that solves this. But none that I could find worked with a setup where the parent element was smaller than the one I wanted to align.

So I set out to find a solution myself. Here’s how I solved it. Any feedback on how to make it better would be much appreciated.

http://jsfiddle.net/k2S3B/1/

When creating this rough solution to a common problem, I took help from the ideas of this: http://jsfiddle.net/thirtydot/x62nV/ posted on http://stackoverflow.com/questions/8149747/aligning-image-to-center-inside-a-smaller-div, so I’d like to give some credits to thirtydot for this. ☺

I hope someone finds this useful!

Cheers!