Html 悬停时DIV内的真中心对齐图像

我有一个DIV，我把图像显示在hover上。这没有问题，但让它们垂直和水平对齐才是真正的问题。我把它搞砸了几个小时，它就是不配合我。我尝试过各种CSS，但都没有用。有人能帮我吗

以下是当前项目：

我尝试了

padding:auto

和

vertical align:middle

，但都不起作用

---

我试图得到的形象，出现在上面是垂直和水平与内部分区对齐。任何建议都是欢迎的

这里是新更新的

jsfiddle

见此。我改变了你的css

---

您应该在回答中添加解释