首先明确，vertical-align只对inline-block和inline元素有效。
在说vertical-align之前，需要先说明一下什么是line box。
浏览器中显示的一行会包含多个非block元素（有block元素时就换行了），通过一个box可以把这一行包含起来，这就是一个line box。
比如一个div，他会占据一行，包裹着内部所有非block元素的就是一个line box。
line box的高度，是本行中拥有最高行高的元素的高度。
此时，对拥有最高行高的非block元素设置vertical-align值，会直接影响本行的基线位置（可以说就是设置了本行的基线位置），本行中其他非block元素设置vertical-align时，都是相对于本行的基线位置进行显示。
举例：
<div style="height:100px;width:100px;border:1px solid black;">
<span style="display:inline-block;height:50px;vertical-align:top;border:1px solid black;">1</span>
<span style="vertical-align:top;">2</span>
<span style="vertical-align:middle;">3</span>
<span style="vertical-align:bottom;">4</span>
</div>
<div style="height:100px;width:100px;border:1px solid black;">
<span style="display:inline-block;height:50px;vertical-align:middle;border:1px solid black;">1</span>
<span style="vertical-align:top;">2</span>
<span style="vertical-align:middle;">3</span>
<span style="vertical-align:bottom;">4</span>
</div>
<div style="height:100px;width:100px;border:1px solid black;">
<span style="display:inline-block;height:50px;vertical-align:bottom;border:1px solid black;">1</span>
<span style="vertical-align:top;">2</span>
<span style="vertical-align:middle;">3</span>
<span style="vertical-align:bottom;">4</span>
</div>
会发现显示如下图所示。
1所在的span高度最高，所以其设置的vertical-align会直接影响本行的基线位置。调整1所在的span出现的先后顺序，结果都是一样的。
<div style="height:100px;width:100px;border:1px solid black;">
<span style="vertical-align:top;">2</span>
<span style="vertical-align:middle;">3</span>
<span style="vertical-align:bottom;">4</span>
<span style="display:inline-block;height:50px;vertical-align:top;border:1px solid black;">1</span>
</div>
<div style="height:100px;width:100px;border:1px solid black;"> <span style="vertical-align:top;">2</span>
<span style="vertical-align:middle;">3</span>
<span style="vertical-align:bottom;">4</span>
<span style="display:inline-block;height:50px;vertical-align:middle;border:1px solid black;">1</span>
</div>
<div style="height:100px;width:100px;border:1px solid black;">
<span style="vertical-align:top;">2</span>
<span style="vertical-align:middle;">3</span>
<span style="vertical-align:bottom;">4</span>
<span style="display:inline-block;height:50px;vertical-align:bottom;border:1px solid black;">1</span>
</div>
再举例：
在一个block元素中使用
#parent::before或者#parent::after
{
content:'';
display:inline-block;
height:100%;
vertical-align:middle;
}
可使#parent中的非block元素垂直居中显示，也是上述的原理。
ps:
如果想让1在span中垂直居中显示，保证span的display是inline-block，然后将span的line-height设置为50px，同span高度相等即可。不可设置为100%，最后的line-height只是文字大小的高度。