Question

我在<div>中有文字，我想要垂直居中。任何简单的方法（非绝对定位方法）。

Answer 1

这是另一种方法：

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

诀窍是使div的高度与行高相同。

<div>some text</div>

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

这会给你一行垂直居中的文字。

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

抱歉，使用绝对定位。

（但它有效）

Answer 2

是的，这是可能的 - 可以在这里找到一个非常彻底的调查：

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

Answer 3

不，遗憾的是，使用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 4

只需将以下css添加到div

即可

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

您还可以看到示例http://www.templatespoint.com/blog/2010/10/div-vertical-align-middle/

有没有一种简单的方法可以在div中垂直居中？

4 个答案: