Get the latest tech news
Vertical-Align: All You Need to Know (CSS) (2014)
The CSS property vertical-align never seems to do what is expected from it. But its behavior can actually be understood. This article explains what is going on.
The boundaries of the margin is indicated by red lines, the border is yellow, the padding green and the content area blue. In case of in-flow content but an overflow property evaluating to something other than visible, the baseline is the bottom edge of the margin-box (example in the middle). middle: The midpoint between the element’s top and bottom edge is aligned to the line box’s baseline plus half of the x-height.
Or read this on Hacker News