Div table-cell vertical align not working

I am trying to simply center text horizontally and vertically using DIV and display type as table-cell but it is not working in either IE8 or Firefox.

Below is the CSS that I am using and that is all that is in the html page.

@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;
}

What am I doing wrong?

I think table-cell needs to have a parent display:table element.

This is how I do it:

CSS:

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: table
}
#content {
    display: table-cell;
    text-align: center;
    vertical-align: middle
}

HTML:

<div id="content">
    Content goes here
</div>

See

Example of vertical centering

and

CSS: centering things.

You can vertically align a floated element in a way which works on IE 6+. It doesn't need full table markup either. This method isn't perfectly clean - includes wrappers and there are a few things to be aware of e.g. if you have too much text outspilling the container - but it's pretty good.

Short answer: You just need to apply display: table-cell to an element inside the floated element (table cells don't float), and use a fallback with position: absolute and top for old IE.

Long answer: Here's a jsfiddle showing the basics. The important stuff summarized (with a conditional comment adding an .old-ie class):

    .wrap {
        float: left;
        height: 100px; /* any fixed amount */
    }
    .wrap2 {
        height: inherit;
    }
    .content {
        display: table-cell;
        height: inherit;
        vertical-align: middle;
    }

    .old-ie .wrap{
        position: relative;
    }
    .old-ie .wrap2 {
        position: absolute;
        top: 50%;
    }
    .old-ie .content {
        position: relative;
        top: -50%;
        display: block;
    }

Here's a jsfiddle that deliberately highlight the minor faults with this method. Note how:

• In standards browsers, content that exceeds the height of the wrapper element stops centering and starts going down the page. This isn't a big problem (probably looks better than creeping up the page), and can be avoided by avoiding content that is too big (note that unless I've overlooked something, overflow methods like overflow: auto; don't seem to work)
• In old IE, the content element doesn't stretch to fill the available space - the height is the height of the content, not of the container.

Those are pretty minor limitations, but worth being aware of.

Code and idea adapted from here

An element styled as follows will be aligned vertically to middle:

.content{
     position:relative;
     -webkit-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
     transform: translateY(-50%);
     top:50%;
}

However, the parent element must have a fixed height. See this fiddle: https://jsfiddle.net/15d0qfdg/12/

see this bin: http://jsbin.com/yacom/2/edit

should set parent element to

display:table-cell;
vertical-align:middle;
text-align:center;