How to vertically align an image that is positioned absolute inside a div.container that positioned relative?

The title says it all pretty much.

Also, I have the following codepen.

https://codepen.io/coddielam/pen/KKMQJaG

I am wondering how come margin: auto 0; didn't work but margin-top: 20% worked?