我正在垂直尝试居中文本，并使用翻译技巧。CSS垂直居中文本

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属性为行高文本开始居中。

有人能解释我为什么这样工作吗？

来源

2014-08-28 user1297783

查看我的回答。它可能会帮助你。 – 2014-08-28 23:08:20

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

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

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

来源

2014-08-28 22:32:29 terrywb

所以变换只适用于块和内嵌块元素？ – user1297783 2014-08-28 22:34:48

本文对block和inline有一个很好的总结：http://stackoverflow.com/questions/9189810/css-display-inline-vs-inline-block – terrywb 2014-08-28 22:40:27

有一个元件垂直中心的正确的方法是，

设置有效div的position到absolute宽度的50%一个top值和设置父的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是从第一行顶部到第二行顶部的距离。

由于您只有一行文字，因此您会看到它位于容器中间。尝试添加另一行文字，你会清楚地理解。

来源

2014-08-28 22:45:23

CSS垂直居中文本

回答

height VS line-height

相关问题

`height` VS `line-height`