这很简单:

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

我在你的小样上试过了。

试试这个:

HTML

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

CSS

div {
    height: 100px;
}

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

如果您需要多条线路，这是最简单的方法。将跨出的文本包装到另一个跨中，并使用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 */
}

DEMO

当然外张成的空间可以是div之类的。

我知道这完全是愚蠢的，你通常不应该在不创建表的时候使用表，但是:

表格单元格可以垂直居中对齐多行文本，甚至在默认情况下也可以这样做。所以一个很好的解决方案可能是这样的:

HTML:

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

CSS(使表项总是适合盒子div):

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

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

在这里看到的: http://www.cssdesk.com/LzpeV

安德烈斯·伊里奇说得对。以防有人错过他的评论…

a .)如果你只有一行文本:

div ｛ 身高:200 px; 行高:200 px;/* <——这是必须定义*/的内容 } <div>垂直居中文本</div>

b .)如果你有多行文本:

div ｛ 身高:200 px; 行高:200 px; ｝ 跨度 ｛ 显示:inline-block; vertical-align:中间; 行高:18 px;/* <——调整*/ ｝ <div><span>垂直居中文本垂直居中文本垂直居中文本垂直居中文本垂直居中文本垂直居中文本垂直居中文本垂直居中文本垂直居中文本垂直居中文本垂直居中文本垂直居中文本垂直居中文本垂直居中文本垂直居中文本垂直居中文本垂直居中文本垂直居中文本垂直居中文本

为了使Omar(或Mahendra)的解决方案更加通用，相对于Firefox的代码块应该被以下内容所取代:

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

当您想要在屏幕中居中或在其直接祖先中设置方框时，Omar的代码就会出现问题。这个定心是通过设置它的位置来完成的

位置:相对;或位置:静态;(不带位置:绝对不固定)。

然后是margin: auto;或者margin-right: auto;margin-left:汽车;

在这种盒心对齐的环境下，Omar的建议是行不通的。它也不能在ie8上运行(市场份额为7.7%)。因此，对于ie8(和其他浏览器)，应该考虑在上述其他解决方案中看到的解决方案。