css – Div表格单元格垂直对齐不工作

我试图简单地中心文本水平和垂直使用DIV和显示类型为表格单元格，但它不工作在IE8或Firefox。

下面是我使用的CSS，这是所有的在html页面。

@charset "utf-8";
/* CSS Document */
html,body
{
    background-color:#FFFFFF;
    font-family:Arial,Helvetica,sans-serif;
    margin: 0;
    padding: 0;
    padding-top: 5px;
}
div.Main
{
    background-color:#FFFFFF;
    border-collapse:collapse;
    width:800px;
    margin-left:auto;
    margin-right:auto;
}
div.MainHeader
{
    color:#C00000;
    font-size:18pt;
    font-weight:bold;
    text-align:center;
    width:800px;
}
div.BlackBox
{
    background-color:#000000;
    color:#FFFF00;
    display:table-cell;
    float:left;
    font-size:18pt;
    font-weight:bold;
    height:191px;
    text-align:center;
    vertical-align:middle;
    width:630px;
}
div.BlackBoxPicture
{
    background-color:#000000;
    float:right;
    height:191px;
    margin-top:auto;
    margin-bottom:auto;
    text-align:right;
    vertical-align:bottom;
    width:170px;
}

我究竟做错了什么？

解决方法

我认为table-cell需要有一个父显示：table元素。