为何line-height可垂直对齐li？为何line-height:15vw能居中li文字而vertical-align:middle无效？

嘿，这俩问题问得挺典型的，很多刚接触CSS垂直对齐的同学都会踩这些坑，我来给你拆解明白～

咱们得先搞懂line-height的本质：它控制的是**行框（line box）**的高度，而行框是inline/inline-block元素所在的“行容器”。对于inline或inline-block元素来说，文字是放在“行内框（inline box）”里的，默认情况下，行内框会在行框中垂直居中。

回到你的场景：ul设置了固定高度15vw，当你给li设置line-height:15vw时，li的行框高度就被拉到了和ul一样的高度。这时候li里的文字作为行内框的内容，自然就会在这个15vw高的行框里垂直居中，看起来就像是在ul里居中了。简单说就是：用line-height把li的行高撑到和父容器ul的高度一致，文字跟着行框居中。

这得先纠正一个常见误解：vertical-align不是用来让元素在父块级容器里垂直居中的！它的作用对象是inline、inline-block、table-cell元素，而且是相对于父元素的行框或者相邻的行内元素来调整对齐方式的。

咱们看你的代码场景：

div{ background-color:black }
li{ display:inline-block; color:white; text-decoration:none; }
ul{ height:15vw; }

<div>
  <ul>
    <li>home</li>
    <li>reset</li>
  </ul>
</div>

这里的ul是块级元素，它的height:15vw是给自身设置的固定高度，但ul内部的行框高度是由li的默认line-height决定的（远小于15vw）。当你给li加vertical-align:middle时，它只是让li在这个小行框里居中，而不是在整个ul的15vw高度里居中。因为ul作为块级容器，它的高度和内部行框高度没有绑定，vertical-align根本“感知”不到ul的15vw高度，自然就没效果。

如果想让vertical-align生效，得让父容器的行框高度等于自身高度，比如给ul也设置line-height:15vw，这时候li的vertical-align:middle就能让它在ul里居中了——不过这时候其实和直接给li设line-height效果差不多。

内容的提问来源于stack exchange，提问作者DCR