在div中垂直对齐文本[重复]

I know it’s totally stupid and you normally really shouldn’t use tables when not creating tables, but:

Table cells can align multiple lines of text vertically centered and even do this by default. So a solution which works quite fine could be something like this:

HTML:

<div class="box">
  <table class="textalignmiddle">
    <tr>
      <td>lorem ipsum ...</td>
    </tr>
  </table>
</div>

CSS (make the table item always fit to the box div):

.box {
  /* For example */
  height: 300px;
}

.textalignmiddle {
  width: 100%;
  height: 100%;
}

See here: http://www.cssdesk.com/LzpeV

也向CSS内容添加垂直对齐#column-content strong：

#column-content strong {
    ...
    vertical-align: middle;
}

另请参阅更新的示例。

===更新===

跨其他文本并跨另一个垂直对齐：

HTML：

... <span>yet another text content that should be centered vertically</span> ...

CSS：

#column-content span {
    vertical-align: middle;
}

另请参阅下一个示例。

这只是应该工作：

#column-content {
        --------
    margin-top: auto;
    margin-bottom: auto;
}

我在您的演示中尝试过。

如果需要多行，这是最简单的方法。将您span的文本换成另一个，span然后用指定高度line-height。特技到多行被复位在内span的line-height。

<span class="textvalignmiddle"><span>YOUR TEXT HERE</span></span>

.textvalignmiddle {
    line-height: /* Set height */;
}

.textvalignmiddle > span {
    display: inline-block;
    vertical-align: middle;
    line-height: 1em; /* Set line height back to normal */
}

演示

当然，外部span可能是a div或您拥有什么。

为了使Omar（或Mahendra）的解决方案更加通用，与Firefox相关的代码块应替换为以下代码：

/* Firefox */
display: flex;
justify-content: center;
align-items: center;

当您想将框位于屏幕或其直接祖先的中间位置时，就会出现Omar代码的问题，否则会起作用。通过将其位置设置为

position: relative;或position:static;（位置不固定：绝对或固定）。

然后保证金：auto; 或margin-right：自动；左边距：自动；

在这种框中心对齐的环境下，Omar的建议不起作用。它在Internet Explorer 8中也无法使用（目前市场份额为7.7％）。因此，对于Internet Explorer 8（和其他浏览器），应考虑上述其他解决方案中的解决方法。

尝试这个：

的HTML

<div><span>Text</span></div>

的CSS

div {
    height: 100px;
}

span {
    height: 100px;
    display: table-cell;
    vertical-align: middle;
}

接受的答案不适用于多行文字。

我更新了的jsfiddle 显示CSS多行文本垂直对齐的解释在这里：

<div id="column-content">
    <div>yet another text content that should be centered vertically</div>
</div>

#column-content {
    border: 1px solid red;
    height: 200px;
    width: 100px;
}
div {
    display: table-cell;
    vertical-align:middle;
    text-align: center;
}

它也可以与<br />“还有另一个...”一起使用

更新2016年4月10日

现在应该使用Flexbox垂直（甚至水平）对齐项目。

<div class="flex-container">
    <div class="flex-item">Item</div>
    <div class="flex-item">Item</div>
    <div class="flex-item">Item</div>
    <div class="flex-item">Item</div>
</div>

<style>
.flex-container {
    display: flex;
    align-items: center; /* Vertical center alignment */
    justify-content: center; /* Horizontal center alignment */
}
</style>

可以在CSS Tricks上阅读有关flexbox的良好指南。感谢本（指出）。我没有时间更新。

一个名叫Mahendra的好人在这里发布了一个非常有效的解决方案。

以下类应使元素在水平方向和垂直方向上与其父元素居中。

.absolute-center {

    /* Internet Explorer 10 */
    display: -ms-flexbox;
    -ms-flex-pack: center;
    -ms-flex-align: center;

    /* Firefox */
    display: -moz-box;
    -moz-box-pack: center;
    -moz-box-align: center;

    /* Safari, Opera, and Chrome */
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;

    /* W3C */
    display: box;
    box-pack: center;
    box-align: center;
}

安德烈斯·伊里奇（Andres Ilich）正确。万一有人错过他的评论...

A.）如果只有一行文本：

div
{
  height: 200px;
  line-height: 200px; /* <-- this is what you must define */
}

<div>vertically centered text</div>

B.）如果您有多行文字：

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

span
{
  display: inline-block;
  vertical-align: middle;
  line-height: 18px; /* <-- adjust this */
}

<div><span>vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text</span></div>

创建一个用于文本内容的容器，span也许是。

#column-content {
  display: inline-block;
}
img {
  vertical-align: middle;
}
span {
  display: inline-block;
  vertical-align: middle;
}

/* for visual purposes */
#column-content {
  border: 1px solid red;
  position: relative;
}

<div id="column-content">

  <img src="http://i.imgur.com/WxW4B.png">
  <span><strong>1234</strong>
    yet another text content that should be centered vertically</span>
</div>

JSFiddle