css样式设置高度不定文本垂直居中

使用css实现文本垂直居中，对于支持display: table的浏览器来说，是比较容易实现的，只需要对外层div设置为table，内层div设置为table-cell，并设置文本垂直居中即可。但对于IE6/7，并不支持display:table，只能改用定位的方式来处理。外层div给一个定位，中间层div相对外层绝对定位，top为50%，内层span相对定位，top为-50%，通过正负50%的定位，使内容垂直居中。

相关演示代码（不管怎么改变div1的高度，都可以保证内容垂直居中，内容不限行数）：

<!DOCTYPE HTML>
<html>
<head>
<title>ie中垂直居中</title>
<meta charset=UTF-8">
<style type="text/css">
.div1{
    width:300px;
    position:absolute;
    border:1px solid #000;
    top:100px;
    left:200px;
    display:table;
}

.div2{
    display:table-cell;
    vertical-align:middle;
    *position:absolute;
    *top:50%;
}

span{
    *position:relative;
    *top:-50%;
}
</style>

</head>
<body>
<div class="div1" style="height:200px">
    <div class="div2">
        <span>IE6/7使用定位关系来垂直居中，IE8/9使用display:table和display:table-cell</span>
    </div>
</div>
</body>
</html>

 

posted @ 2013-09-01 17:27  Kiinlam  阅读(3060)  评论(0)  编辑  收藏  举报