Vertical block alignment in CSS

Greetings to all, I want to share my own method of centering the block vertically. All probably and so read quite a few articles how to do it and I am not talking about some completely new way, because all browsers, apart from IE, always understood the simple construction perfectly:

HTML:

< div >
< p >
Because the Welsh and Roman heritage was almost entirely erased by the invasion of low German and then Scandinavian populations….
</ p >
</ div >

* This source code was highlighted with Source Code Highlighter .

CSS:
')

div {
display: table-cell;
vertical-align: middle;
}

* This source code was highlighted with Source Code Highlighter .

and in fact, it only remained to teach IE (7 and below) to do the same. What led to the invention is a lot of perverted ways: adding expression, manipulating line-height, inserting an empty inline element after text, etc. I also came up with a way for IE, using the code presented above for other browsers. And so here is my method:

HTML:

< div class ="b-width" >
< div class ="b-valign-middle" >
< div >
< p >
, . - . terran Canata , , , " " .
, . - . terran Canata , , , " " . - , . , zerg EffOrt SPL, . - , . </ p >
</ div >
</ div >
</ div >

* This source code was highlighted with Source Code Highlighter .

total CSS:

.b-width {
width: 40%;
margin: 0 auto;
}

.b-valign-middle {
height: 500px;
border: 1px solid;
position: relative;
display: table-cell;
vertical-align: middle;
}

.b-valign-middle p {
border: 1px solid red;
}

* This source code was highlighted with Source Code Highlighter .

CSS for IE7 and below:

.b-valign-middle div {
position: absolute;
top: 50%;
}

.b-valign-middle p {
position: relative;
top: -50%;
}

* This source code was highlighted with Source Code Highlighter .

Implementation example

Let me explain a little: our container for which we indicate the height is .b-valign-middle, inside it we need to center the content of an unknown volume that we wrap in a div and p (many will not say very well from the point of view of semantics, but it's worth it ). The first wrapper is the div in order to shift the beginning of the content to the middle of the container (top: 50%). And now the most interesting thing: the second wrapper - p is needed in order to raise the content by 50% of the height of the first wrapper; for this, we set the div to position: absolute; (relative won't work) and p top: -50%, that's all! Pretty simple, isn't it?
Moreover, this method works only in IE, normal browsers do not raise p by 50% of the height of the div, because the height is not explicitly set for it, and IE was pleasantly surprised this time!

Well that's all. I would be glad if this method is useful to someone, just as if I am not the first who invented it, I ask you not to scold too much, because I really invented it myself. Checked a method under browsers: IE6 +, Opera 9.6, FF3.5, Chrome, Safari3.