Question

有人能告诉我为什么盒子div不会垂直对齐吗？我也尝试使用表格，它也不会对齐。谢谢！

<html>
<head>
    <style>

    #box{
        width:400px;
        height:400px;
        background-color:black;
        }

    #tb{
        display:table;
        width:100%; 
    }

    #td{
        display:table-cell;
        vertical-align:middle;
        text-align:center;  
    }

    </style>
    </head>

    <body>
        <div id="tb">
            <div id="td">
                <div id="box"></div>
            </div>
        </div>
    </body>
    </html>

Answer 1

Css：

  #box {
       width:400px;
       height:400px;
       background-color:black;
       display: table-cell;
       vertical-align: middle;
       text-align: center;
   }

小提琴：http://jsfiddle.net/9uGAU/

Answer 2

试试这个

<强> HTML

<div id="tb">
    <div id="td">
        <div id="box"></div>
    </div>
</div>

<强> CSS

html, body {
    height:100%;
}
#box {
    vertical-align: middle;
    width: 200px;
    height: 200px;
    background-color: #000;
    margin: 0 auto;

}
#tb{
    display: table;
    height: 100%;
    width: 100%;
    background: #999;
    text-align: center;
}
#td {
    display: table-cell;
    width: 100%;
    height: 100%;
    background: #999;
    text-align: center;
    vertical-align: middle;
}

Live Demo

Div不会使用CSS display：table;

2 个答案: