CSS implementation unknown height graphic Blend Vertical Center

(from the already dead time and again finally hung out of the Baidu space manually rescued, published on 2014-06-26)

CSS implementation Unknown height text mix vertical Center, read CSS to achieve the unknown height of the text mix vertical center.

IE6,IE7,FF3 Test Passed

css* {margin:0; padding:0; list-style:none;}

#vertical_box {

width:100%;

display:table;

BORDER:1PX Red Solid;

height:400px;

/* hack*/*position:relative for IE;

}

#vertical_box_sub {

Display:table-cell;

Vertical-align:middle;

/* hack*/*position:absolute for IE; *top:50%;

}

#vertical_box_container {

font-family: "Song Body";

BORDER:1PX Green solid;

/* hack*/*position:relative for IE; *top:-50%;

margin:0 Auto; width:200px;

}

Html
<div id= "Vertical_box" >
<div id= "Vertical_box_sub" >
<div id= "Vertical_box_container" >
<p> I was centered on the text </p>
<p> Me Center </p>
<p> You also center </p>

</div>
</div></div>

CSS implementation unknown height graphic Blend Vertical Center