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>