有没有一种简单的方法在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/