CSS垂直居中文本

Question

我正在垂直尝试中心文字，我使用翻译技巧。

HTML

<div class="first">
    <div class="second">
        <span>TESTING</span>
    </div>
</div>

CSS

div.first > div.second {
   border: 1px solid red;
   height: 2em;
}

div.first > div.second > span{
   position: relative;
   top: 50%;
   transform: translateY(-50%);
}

为什么文字不是垂直中心？Fiddler

当我将高度css属性更改为行高文本开始居中时，我注意到了。

有人可以解释一下为什么这样工作吗？

Answer 1

跨度不是块元素。请注意，如果您向CSS添加display：block，它将垂直对齐。

div.first > div.second > span{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  display: block;
}

或者你可以将你的跨度改为div。

Answer 2

使元素垂直居中的正确方法是，

将有效div的position设置为absolute宽度top值50%，并将父级position设置为relative。

<强> 实施例

div.first > div.second {
    position: relative;
}
div.first > div.second > span {
    position: absolute;
    top: 50%;
}

<强> DEMO

height vs line-height

• height是容器的垂直测量值。
• line-height是从第一行顶部到第二行顶部的距离。

由于此处只有一行文字，因此您可以在容器中间看到它。尝试添加另一行文字，您将清楚地理解。