It doesn’t work because vertical-align sets the alignment of inline-level contents with respect to their line box, not their containing block:
This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.
A line box is
The rectangular area that contains the boxes that form a line
When you see some text which has multiple lines, each one is a line box. For example, if you have
p { border: 3px solid; width: 350px; height: 200px; line-height: 28px; padding: 15px; }
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>
If there is only a single line, like in your case, it’s also a line box
Using vertical-align: middle centers .content vertically inside that line box. But the problem is that the line box is not vertically centered inside the containing block.
If you want to center something vertically at the middle of the containing block see How to align text vertically center in div with CSS?