CSS实现未知高度图文混合垂直居中

IE6,IE7,FF3测试通过

 

* {
 margin:0;
 padding:0;
 list-style:none; 
 }
 
 #vertical_box {
 width:100%;
 display:table;
 border:1px red solid;
 height:400px;

 /*针对IE的hack*/
 *position:relative;
 }

 #vertical_box_sub {
 display: table-cell;
 vertical-align: middle;

 /*针对IE的hack*/
 *position:absolute;
 *top:50%;
 }

 #vertical_box_container {
 font-family:"宋体";
 border:1px green solid;

/*针对IE的hack*/
 *position:relative;
 *top:-50%;

 margin:0 auto;
 width:200px;
 }

 

 

<div id="vertical_box">
    <div id="vertical_box_sub">
        <div id="vertical_box_container">
            <p>我是居中的文字</p>
            <p>我居中</p>
            <p>你也居中</p>
            <img src="http://www.adobetutorialz.com/Advertising/W3Markup.jpg" border=0 alt="" title="">
        </div>
    </div>
</div>