Vertical-align only works in inline elements and table cells.
Two common css hacks are these: https://jsfiddle.net/02vxofa6/1/
The parent (or a wrapper div container filling the parent) is set to display: table-cell; and vertical-align: middle;
If there’s a reason this cannot be done, there’s also another hack:
Set the parent to position: relative; and the text to position: absolute: top: 50%;
But then it’s not exactly in the middle, as the distance to the top is 50%. Give the text a fixed height (maybe even considering a line break there) and set margin-top to - half the text height. height: 20px; margin-top: -10pxfor example.