Vertically align a DIV within another DIV

Found out how to do something new today.
For ages, I (and many other developers) have been trying to figure out how to do vertical alignment (e.g. td valign=middle) but with DIVs. Before now, a solution escaped me. But, thanks to Dušan Janovský, I have finally managed to do it.

Based on his work, I have contructed my own example as follows.
Note: if you've searched for this solution and come across this page, you must know the height of the container DIV. Sorry, this is a drag, but it's the only non-JS method that works.

Here is the HTML:
<br /><div class="outercenter" id="exampleouterdiv"><br /> <div class="middlecenter"><br /> <div class="innercenter"><br /> Title of my DIV<br /> </div><br /> </div><br /> </div><br />
Here is the CSS:
.outercenter {
overflow: hidden;
position: relative;
}
.outercenter[class] {
display: table;
position: static;
}
.middlecenter {
position: absolute;
top: 50%;
}
.middlecenter[class] {
display: table-cell;
vertical-align: middle;
position: static;
}

.innercenter {
position: relative;
top: -50%
}
.innercenter[class] {
position: static;
}
#exampleouterdiv {
height:50px;
}
You MUST give your outer DIV an ID and then reference this in the CSS. It is this outer DIV that you have to set an absolute height on. I know, this is a bit of a drag, but frankly, most of the time you can figure out what the height of the outer bit is.

The glorious thing with the above code is if you want to apply styles to the DIVs, you can do this independently of the CSS styles for the outer, middle and lower classes.

You've already had to set the ID for the other class to give it a height, but you can do the same for the middle (kind of pointless) and for the inner (e.g. for font styles etc.)

Let me know if you find this helpful or if you have any other comments.