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

我更新了jsp，以显示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 />在“yet another…”

为了使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(和其他浏览器)，应该考虑在上述其他解决方案中看到的解决方案。

这很简单:

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

我在你的小样上试过了。

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

我更新了jsp，以显示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 />在“yet another…”

2016年4月10日更新

Flexboxes现在应该用来垂直(甚至水平)对齐物品。

身体{ 身高:150 px; 边框:5px纯青色; 字体大小:50 px; 显示:flex; 对齐项目:中心;/*垂直中心对齐*/ justify-content:中心;/*水平中心对齐*/ ｝ 中间

一个很好的flexbox指南可以阅读CSS技巧。谢谢Ben(来自评论)指出这一点。我没有时间更新。

一个叫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;
}

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