Why the fuck can't I do vertical center without 40 hacks that don't involve flex? I have ant this fucking thing in the middle of this img no matter what. (All due respect to those that make even the smallest div possible)

I have an image that is responsive.

On hover I want a grey overlay and a "view image" top show. I want the view image to be centered horizontally and vertically.

To achieve this I used a combination of after pseudo, hover, position relative, position absolute and hacky margins to make it work. Just seems there is a less hacky way to do this. Happy to share code if you want!