有沒有一種簡單的方法在div中垂直居中文本？

Question

我在<div>中有文本，我想要垂直居中。任何簡單的方法來做到這一點（非絕對定位方法）。

Answer 1

這是另一種方法：

http://jsfiddle.net/SebastianPataneMasuelli/V2D3L/1/

訣竅是使div的高度與line-height相同。

<div>some text</div> 

div { 
line-height: 100px; 
height: 100px; 
} 

這給你一行垂直居中文本。

有一種方法： http://www.jakpsatweb.cz/css/css-vertical-center-solution.html。

對不起，使用絕對定位。

（但它的工作原理）

Answer 2

不，不幸的是，沒有好的方法來使用CSS來完成此操作。我會建議使用像JQuery這樣的JavaScript框架或類似的東西來實現這一點。它只是你想要垂直居中的文本嗎？

另外，我知道很多人都不願意使用表格，但是html表格可以讓你垂直居中文本，所以如果你不願意使用javascript來實現這一點，那麼這可能是一個快速的解決方法。

所以我想它或者使用一些JavaScript，並避免使用HTML表格或只是使用表格來做你的垂直居中。

僅供您參考，您可以在表格的td元素上使用valign屬性來垂直對齊其內容。

你可以做這樣的事情：

<div id="center-text"> 

    <div id="center-text-inner"> 
    hello there 
    </div> 

</div> 

$(document).ready(function() { 

    $('#center-text-inner').css({ 
    'position' : 'relative', 
    'top' : ($('#center-text').height() - $(this).height())/2 
    }); 

}); 

Answer 3

是的，它是可能的 - 一個非常徹底的調查可以在這裏找到：

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Answer 4

只需添加以下CSS到div的

display:table-cell; 
vertical-align:middle; 

你還可以看到例如http://www.templatespoint.com/blog/2010/10/div-vertical-align-middle/