使用 CSS display: table; div 不会垂直对齐

【问题标题】：Div won't vertically align using CSS display: table;使用 CSS display: table; div 不会垂直对齐
【发布时间】：2013-08-24 08:50:27
【问题描述】：

有人能告诉我为什么盒子 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>

【问题讨论】：

标签： css vertical-alignment head

【解决方案1】：

CSS：

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

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

【讨论】：

谢谢，但我想垂直对齐屏幕上的框而不是文本

【解决方案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

【讨论】：