在所有情况下，vertical-align: middle;on thetd都会执行预期的操作。也就是说，将 对齐td到该行的中心，并将 的全部内容对齐td到垂直中间（默认情况下），在顶部和底部留出相等的空间。
这是W3 规范所说的 vertical-align: middle：
单元格的中心与其跨越的行的中心对齐。
行高计算：
'table-row' 元素框的高度是在用户代理拥有该行中的所有单元格可用时计算的：它是该行计算的“高度”的最大值，该行中每个单元格的计算“高度”，以及单元格所需的最小高度 (MIN)。
在 CSS 2.1 中，单元格框的高度是内容所需的最小高度。表格单元格的“高度”属性可以影响行的高度（见上文），但不会增加单元格框的高度。
小于行高的单元格框会收到额外的顶部或底部填充。
由于上述原因，thetr和 the的高度td变为 100px，但单元格框仅占用内容所需的高度量（imgheight = 43px）。现在，由于单元格框小于行高，因此添加了额外的填充，如上图框 5 所示，从而使内容也对齐到中间。
TD只有图像：
当只有一个img时，内容高度等于 的高度img。所以它被定位到中间。
从上图中可以看出，这不需要 a vertical-align: middleon theimg明确的，因为td它的内容与中间对齐。
TD 只有内联数据：
当td只有一个span或span加上一个 inlinediv时，内容的高度等于line-heighttext 的默认值（或任何指定的line-height）。在这种情况下，td它也会正确对齐。
当文本内容超出第一行时（参考demo），可以看到td自动将first-line（青色背景标记）向上推，保证整个内容对齐到中间（不只是单行） ）。
TD 有一个图像和一个跨度：
当我们将一个img和一个span（内联文本）放在 中td时，内容高度等于第二行和后续行的img加号的高度。line-height
在这种情况下，有两种可能的情况，如下所述：
案例 1 - img 标签没有 vertical-align 指定
在这种情况下，与（默认）img对齐。baseline然后td将整个内容对齐到中间。这意味着在内容的顶部和底部td留下大约28.5px (= (100-43)/2) 的间隙。同样，vertical-alignontd完成了这项工作，它将内容放在中间（也就是说，在顶部和底部留出相等的间隙）。但是由于img高度更高，文本被向下推。
如果我们将img高度降低到小于行高（比如 10px），我们可以看到即使使用img+span它也会与中间对齐。
案例 2 - img 标签有 vertical-align: middle
在这种情况下，也vertical-align与td案例 1 一样。但是，这种情况下的文本靠近中间，因为img也与middle行对齐。
table {
border: solid 1px red;
}
td {
height: 100px;
width: 200px;
vertical-align: middle;
border: solid 1px green;
}
img {
height: 43px;
width: 43px;
border: solid 1px green;
}
.one td + td img {
vertical-align: middle;
}
.three td + td img {
height: 10px;
width: 10px;
}
.four img {
vertical-align: middle;
}
.five img + img{
height: 50px;
width: 50px;
}
td:first-line {
background-color: cyan;
}
div {
display: inline;
}
<table>
<tr class='one'>
<td>
<img src='http://static.jsbin.com/images/favicon.png' />
</td>
<td>
<img src='http://static.jsbin.com/images/favicon.png' />
</td>
</tr>
<tr class='two'>
<td>
<div>aaa</div>
<span>aaa</span>
</td>
<td>
<div>aaa</div>
<span>aaa aaaaaaa aaaaaaaa aaaaaaaa</span>
</td>
</tr>
<tr class='three'>
<td>
Case 1
<img src='http://static.jsbin.com/images/favicon.png' />
<span>Image + Span</span>
</td>
<td>
Case 1
<img src='http://static.jsbin.com/images/favicon.png' />
<span>Image + Span</span>
</td>
</tr>
<tr class='four'>
<td>
Case 2
<img src='http://static.jsbin.com/images/favicon.png' />
<span>Image + Span</span>
</td>
<td>
<img src='http://static.jsbin.com/images/favicon.png' />
<span>Image + Span + more text.......</span>
</td>
</tr>
<tr class='five'>
<td>
Case 3
<img src='http://static.jsbin.com/images/favicon.png' />
<img src='http://static.jsbin.com/images/favicon.png' />
<span>Image + Span text...</span>
</td>
<td>
<img src='http://static.jsbin.com/images/favicon.png' />
<span>Image + Span + more text.......</span>
</td>
</tr>
</table>
