Css 行高间隙-内容未垂直居中

我在一个jQuery移动站点上工作，由于某种原因，

行高

并没有像我预期的那样工作。所以我想，也许我犯了一个错误，所以我尝试了一个简单的空页面，也在JSFIDLE上。这里是链接。我记得，我做了一百万次，把一个元素垂直地放在另一个元素的中心

所以，当你看到结果时，你会看到，红色框不在绿色框的中心。我测量，在顶部有22px，在底部有16px

有谁能解释一下，为什么会发生这种情况，我该如何解决

<div style="height: 60px; width: 200px; line-height: 60px; border: 1px solid #0f0; box-sizing: border-box">
    <div style="display: inline-block; height: 20px; width: 40px;  border: 1px solid #f00; box-sizing: border-box"></div>
</div>

---

它与呈现的字体大小有关。您可以将容器的字体大小设置为

20px

，这将允许文本基线居中于内部块的高度。如果查看，您会看到有字体大小的块与没有字体大小的块之间的差异

其主要原因是，

行高

是一个文本属性，用于影响文本元素。不过，它也可以在其他情况下工作

我所做的就是在父div中添加一个

font size

的

20px

：

<div style="height: 60px; width: 200px; line-height: 60px; display: inline-block; border: 1px solid #0f0; box-sizing: border-box; font-size: 20px;">
    <div style="display: inline-block; height: 20px; width: 40px; line-height: 40px; border: 1px solid #f00; box-sizing: border-box;"></div>
</div>

---

您可以尝试使用

position:absolute

将其放到您想要的位置

---

您需要将

position:relative

放在container div上，它不会与其他元素一起流动，但它肯定是以这种方式居中的。

可能不是最佳解决方案，但请尝试添加

text align:center进入外部div。我想垂直居中，而不是水平居中。实际上，如果你看基线，我认为它是根据固有字体大小垂直居中的位置设置基线。这是你想要的吗？您使用的方法非常适用于单行文本。行高用于文本。最好选择其他定心选项。谷歌“以未知为中心”。
    <div style="height: 60px; width: 200px; line-height: 60px; border: 1px solid #0f0; box-sizing: border-box; position: relative;">

    <div style="display: inline-block; height: 20px; width: 40px; border: 1px solid #f00; box-sizing: border-box; position: absolute; top: 50%; margin-top: -10px;/*half height of this element*/"></div>

</div>