Истинный центр выравнивания изображений внутри DIV на Hover

У меня есть DIV, что я поместил изображения, которые появляются при наведении. Это не проблема, но их выравнивание по вертикали и по горизонтали является реальной проблемой. Я перепутал это в течение нескольких часов, и он просто не будет сотрудничать со мной. Я пробовал всевозможные CSS, но безрезультатно. Может кто-нибудь, пожалуйста, помогите мне?

Вот текущий проект: JS Fiddle

Я попробовал padding:auto и vertical-align:middle но не работал.

Я пытаюсь получить изображение, которое появляется поверх, чтобы быть вертикально и горизонтально выровнено с внутренним DIV. Любые предложения приветствуются.