knowing whether the element is block or inline is important to do vertical alignment
vertical-align only works for inline elements
you have to rely on margin and/or position:relative or position:absolute + top:50% or flex with flex-direction: row and align-items:(for cross axis)to align vertically for block element.
Reference:
https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements#Block-level_vs._inline
https://www.w3schools.com/css/css_align.asp
http://phrogz.net/CSS/vertical-align/index.html