我试图理解为什么line-height CSS属性将文本垂直放置在这个按钮的中间：
.btn-order {
width: 220px;
height: 58px;
font-size: 24px;
padding: 0;
text-align: center;
vertical-align: middle;
line-height: 58px;
border: 1px solid black;
}<div class="btn-order">Complete Order</div>line-height属性本质上是在文本"Complete Order"的上方和下方设置一个29px（29+29=58）文本行。如果你在下面添加另一行文本，你会发现它在下面是58px。你把第八行放在这里只是为了让你的文本在中间居中。
这里有一个很好的幻灯片，可以帮助你更好地理解这个概念。。。线路高度
下面是一个使用您的代码的示例，说明我所说的内容：http://jsfiddle.net/YawDF/14/
通过将line-height设置为58px，您告诉浏览器在文本行的上下各留一半，在每行之间创建一个"58px"的间隙，而在第一行上方仅创建一个"29px"的间隙。
旁注：在您显示的代码中，您对vertical-align: middle的使用是无用的。这可以一起取出
它是经过设计的。如果CSS解析器（即浏览器）不知道你的文本有多高，他就无法正确地垂直对齐你的文本。
请注意，line-height属性有一个默认值。
行高定义了使段落看起来整洁的文本高度，因此垂直对齐相对于行高有效。当您增加行高时，它会增加高度，您可以更清楚地看到文本垂直对齐的效果
把它当作我们孩子在幼儿园学习英语写作的笔记本
您生成的文本位于其自己的行框内，垂直对齐用于放置在该框内。但是，该框与您在文本周围包装的div无关。您将div的高度设置为58px，但这不会影响行文本框的高度。这就是为什么您需要线条高度来匹配div的高度。
每当一个段落插入到一个分区中时，第一行和div顶部边界之间的距离是行高的一半，即如果默认的行高是1px，那么第一行和div
如果使用height:58px进行除法，则直线与div顶部边界之间的距离为29px，直线与底部div边界之间的间距为=（直线与顶部边界的总div高度距离），即58px-29px=29px。这将导致直线在中心垂直对齐。
此外，如果使用行高来居中对齐文本，则无需使用vertical align:middle（用于不包含一行的文本）。