多行文本垂直居中

在网上找了一下多行文本垂直居中的方法,看了下然后就重新写了下！！！

<body>
<div class="d1">
    <div class="d2">
        <div class="d3">
            文本垂直居中<br/>
            文本垂直居中<br/>
            文本垂直居中<br/>
        </div>
    </div>
</div>
</body>
html结构似乎这样的 
<style type="text/css">
.d1{background:#96C; height:500px; width:500px; display:table;}
.d2{display:table-cell; vertical-align:middle;}
</style>

这样就兼容了大多数浏览器不过就是ie6不兼容要兼容ie6只要几句代码 

.d1{background:#96C; height:500px; width:500px; display:table;_position:relative;}
.d2{display:table-cell; vertical-align:middle;_position:absolute; _top:50%;}
.d3{_position:relative; _top:-50%;}

就ok了!

posted @ 2011-06-27 16:09  nbaTom  阅读(384)  评论(1)    收藏  举报