父元素高度确定的多行文本、图片、块级元素的竖直居中

　　CSS中有一个竖直居中的属性 vertical-align，但只有当父元素为td或者th时，这个vertical-align属性才会生效，对于其他块级元素，例如div、p等，默认情况下是不支持vertical-align属性的。

　　在Firefox和IE 8下，可以设置块级元素display类型为table-cell，激活vertical-align属性，但是IE 6 和 IE 7 并不支持display:table-cell。但可以通过特定格式的hack，使之支持。

<style type="text/css">
    .mb10{margin-bottom:10px;}
    .wrap{ background:#000; width:500px; color:#FFF; margin-bottom:10px; height:100px;
           display:table-cell; vertical-align:middle;*position:relative;}
    .test{width:200px;height:50px;background:red;}
    .verticalWrap{*position:absolute;*top:50%;}
    .vertical{*position:relative;*top:-50%;}
</style>

    <div class="mb10">
        <div class="wrap">
            <div class="verticalWrap">
                <div class="vertical">
                    hello world!<br />
                    hello world!<br />
                    hello world!
                </div>
            </div>
        </div>
    </div>
    <div class="mb10">
        <div class="wrap">
            <div class="verticalWrap">
                <div class="vertical test">
                </div>
            </div>
        </div>
    </div>