你可以在CSS中使用flex将div垂直和水平居中;

#outerDiv{
width: 500px;
    height: 500px;
    position:relative;
    border:1px solid #000;
    margin:0 auto;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;

    }

#innerDiv{
    width: 284px;
    height: 290px;
    border:1px solid #eee;

}

第二个是这样的;

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

        #innerDiv{
        max-width: 300px;
        height: 200px;
        background-color: blue;
        position:absolute; 
        left:0;
        right:0;
        top:0;
        bottom:0;
        margin:auto;
        border:1px solid #000;
        border-radius:4px;
    }

以及生成的HTML:

    <div id="outerDiv">
        <div id="innerDiv"></div>
    </div>

我知道这个问题是一年前提出的…… 无论如何，感谢CSS3，你可以很容易地垂直对齐div在div(例子有http://jsfiddle.net/mcSfe/98/)

<div style="width: 100px; height: 100px">
<div>
Go to Hell!
</div>
</div>

div
{
display:-moz-box;
-moz-box-align:center;
} 

我已经使用以下解决方案一年多了，它也适用于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>

当你的高度没有设置(自动);你可以给内部div一些填充(顶部和底部)，使它垂直居中:

<div>
    <div style="padding-top:20px;padding-bottom:20px">
    <!--content-->
    </div>
</div>

另一种方法是使用转换转换

外部Div必须将其位置设置为相对或固定，内部Div必须将其位置设置为绝对，顶部和左侧为50%，并应用transform: translate(-50%， -50%)。

div.cn { 位置:相对; 宽度:200 px; 身高:200 px; 背景:灰色; text-align:中心; ｝ div.inner { 位置:绝对的; 上图:50%; 左:50%; 宽度:100 px; 身高:100 px; -webkit-transform (-50%， -50%); 转换:翻译(-50%，-50%); 背景:红色; ｝ < div class = " cn”> < div class = "内部" > 测验 < / div > < / div >

测试:

Opera 24.0(最低12.1) Safari 5.1.7(最少4个带-webkit-前缀) Firefox 31.0(最低3.6带-moz前缀，最低16不带前缀) Chrome 36(最少11个带-webkit前缀，最少36个不带前缀) IE 11, 10(最小9个带-ms前缀，最小10个不带前缀) 更多浏览器，我可以使用吗?

这将工作的方式回到IE6!

<！DOCTYPE html>在IE6上也是必需的! [将强制IE6默认严格模式以及]。

(当然，方框着色仅供演示使用)

#outer{ width: 180px; height: 180px; margin: auto; text-align: center; } #inner{ text-align: center; vertical-align: middle; width: 100px; height: 100px; display: inline-block; padding: .3em; } #center{ height: 100%; width:0px; vertical-align: middle; display: inline-block; } div {background: rgba(0,110,255,.7)} <DIV id=outer> <div id=center> </div><!--Don't break this line!--><div id=inner> The inner DIV </div> </DIV>