css樣式設置高度不定文本垂直居中

時間 2019-11-14

標籤 css 樣式設置高度不定文本垂直居中欄目 CSS 简体版

原文原文鏈接

使用css實現文本垂直居中，對於支持display: table的瀏覽器來講，是比較容易實現的，只須要對外層div設置爲table，內層div設置爲table-cell，並設置文本垂直居中便可。但對於IE6/7，並不支持display:table，只能改用定位的方式來處理。外層div給一個定位，中間層div相對外層絕對定位，top爲50%，內層span相對定位，top爲-50%，經過正負50%的定位，使內容垂直居中。css

相關演示代碼（無論怎麼改變div1的高度，均可以保證內容垂直居中，內容不限行數）：html

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。