Vertical-align why not working?

Question

css

I wanted the text inside the block to be centered along the y axis, and it seems that vertical-align should work.
As I read in cheat sheets that it centers on the y-axis relative to the parent, but it seems that I gave the height to the parent. I read problems on these topics in Google using display:table-cell even does not work, I know that padding can be done. But I wonder why it does not work?
Here is the code https://jsfiddle.net/ob5k8mxu/

Answer 1

You add the property to the link itself display: table-cell;, then it will be ok.
Well, in general, use flex, everything is easier with it:

display: flex;
align-items: center;
justify-content: center;