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

【问题标题】：Is there an easy way to center text vertically in a div?有没有一种简单的方法可以在 div 中垂直居中文本？
【发布时间】：2011-05-12 10:45:59
【问题描述】：

我在 <div> 中有想要垂直居中的文本。任何简单的方法来做到这一点（非绝对定位方法）。

【问题讨论】：

你需要支持哪些浏览器？
我现在正在考虑 ie7 及更高版本、chrome、safari、firefox 3 及更高版本
一行文字还是多行文字？
查看我的答案，使用 line-height 垂直对齐 div 中的单行文本
How to align text vertically center in div with css?的可能重复

标签： html css

【解决方案1】：

不，很遗憾，没有使用 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
  });

});

【讨论】：

啊...没想到 javascript，我实际上大量使用 javascript 和 jquery 框架，所以你在说什么？

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

这是另一种方法：

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.~~

抱歉，使用绝对定位。

（但它有效）

【讨论】：

【解决方案4】：

只需将以下css添加到div中

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

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

【讨论】：