The text doesn’t center on the hover. A possible fix is to apply
padding-top. The way you applied the background image prevented changing the value of top to anything other than 0.
EDIT: Reread your post above. I guess my Firefox doesn’t respect the “old flexbox syntax” haha.