Вертикальное выравнивание таблицы и ячейки 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;
}

Что я делаю не так?