小提琴链接< http://jsfiddle.net/dGHFV/2515/>

试试这个

   #outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
        border:1px solid red;
    }

    #innerDiv{
        width: 284px;
        height: 290px;
        position:absolute;
        top: 0px;
        left:0px;
        right:0px;
        bottom:0px;
        margin:auto;
        border:1px solid green;
    }

我个人更喜欢使用隐藏的伪元素来跨越外部容器的整个高度，并将其与其他内容垂直对齐。 Chris coyer有一篇关于这项技术的好文章。http://css-tricks.com/centering-in-the-unknown/ 这样做的巨大优势是可伸缩性。你不必知道内容的高度，也不必担心它的增长/缩小。此解决方案可伸缩:)。

这里有一个你需要的所有CSS和一个工作示例。 http://jsfiddle.net/m5sLze0d/

.center:before {
    content: ""; /* Adding Extra Space Above Element */
    display: inline-block;
    height: 100%;
    margin-right: -0.3em;
    vertical-align: middle;
}
.center_element {
    display:inline-block;
    float:none;
    vertical-align:middle;
    white-space:normal;
    text-align:left;
}

试着像这样对齐内部元素:

top: 0;
bottom: 0;
margin: auto;
display: table;

当然还有:

position: absolute;

对于innerdiv没有指定它的高度值，没有纯CSS解决方案使它垂直居中。javascript的解决方案可以得到innerdiv的offsetHeight，然后计算style.marginTop。

我已经使用以下解决方案一年多了，它也适用于IE 7和8。

<style>
.outer {
    font-size: 0;
    width: 400px;
    height: 400px;
    background: orange;
    text-align: center;
    display: inline-block;
}

.outer .emptyDiv {
    height: 100%;
    background: orange;
    visibility: collapse;
}

.outer .inner {
    padding: 10px;
    background: red;
    font: bold 12px Arial;
}

.verticalCenter {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}
</style>

<div class="outer">
    <div class="emptyDiv verticalCenter"></div>
    <div class="inner verticalCenter">
        <p>Line 1</p>
        <p>Line 2</p>
    </div>
</div>

而不是让自己陷入难以编写和难以维护的CSS(这也需要仔细的跨浏览器验证!)我发现放弃CSS而改用非常简单的HTML 1.0会更好:

<table id="outerDiv" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td valign="middle" id="innerDiv">
        </td>
    </tr>
</table>

这实现了原始海报想要的一切，并且是健壮的和可维护的。