我正在垂直嘗試居中文本，並使用翻譯技巧。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`