我个人更喜欢使用隐藏的伪元素来跨越外部容器的整个高度，并将其与其他内容垂直对齐。 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;
}

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

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

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

如果你在看完上面给出的精彩答案后仍然不明白。

这里有两个简单的例子，告诉你如何实现它。

使用显示:表格单元格

.wrapper { 显示:表格单元; vertical-align:中间; text-align:中心; 宽度:400 px; 身高:300 px; 边框:1px实体#555; ｝ .container { 显示:inline-block; text-align:左; 填充:20 px; 边框:1px solid #cd0000; ｝ < div class = "包装" > < div class = "容器" > 使用"<strong>display: table-cell</strong>"将div居中对齐 < / div > < / div >

使用flex-box(显示:flex)

.wrapper { 显示:flex; justify-content:中心; 宽度:400 px; 身高:300 px; 边框:1px实体#555; ｝ .container { align-self:中心; 填充:20 px; 边框:1px solid #cd0000; ｝ < div class = "包装" > < div class = "容器" > 使用"<strong>display: flex</strong>"将div居中 < / div > < / div >

注意:在使用上述实现之前，请检查display: table-cell和flex的浏览器兼容性。

小提琴链接< 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;
    }

你可以用一个简单的javascript (jQuery)块来做到这一点。

CSS:

#outerDiv{
    height:100%;
}

Javascript:

<script type="text/javascript">
    $(document).ready(function () {
        $("#innerDiv").css('top', ($(window).height() - $("#content").height()) / 2);
    });
</script>

在父元素上显示文本对齐中心，在子元素上显示内联块。这将居中所有的东西。我相信这叫做“块浮动”。

<div class="outer">
 <div class="inner"> some content </div>
</div><!-- end outer -->

<style>
div.outer{
 width: 100%;
 text-align: center;
}
div.inner{
 display: inline-block;
 text-align: left
}
</style>

这也是一个很好的选择浮动，祝你好运!