Div+Css教程模板無(wú)憂>建站教程>Div+Css教程>Div+CSS教程>

如何實(shí)現(xiàn)未知高居垂直居中？_Div+CSS教程

教程Tag：暫無(wú)Tag,歡迎添加,賺取U幣!

　　
　　盡管我們知道CSS的vertical-align特性，但是并不能有效解決未知高度的垂直居中問(wèn)題（在一個(gè)div容器里有未知高度的文本或圖片的情況下）。

　　標(biāo)準(zhǔn)瀏覽器如Mozilla，Opera等，可將父級(jí)元素顯示方式設(shè)定為T(mén)ABLE(display: table;) ，內(nèi)部子元素定為table-cell (display: table-cell)，通過(guò)vertical-align特性使其垂直居中，但非標(biāo)準(zhǔn)瀏覽器是不支持的。依然解決不了未知高居垂直居中。

　　非標(biāo)準(zhǔn)瀏覽器只能在子元素里設(shè)距頂部50%，里面再套一個(gè)容器元素距頂部-50% 來(lái)抵消。最終實(shí)現(xiàn)未知高居垂直居中的設(shè)置。

　　看下面的CSS代碼：

示例代碼 [m.dounai2.com]

body {padding: 0; margin: 0;}
body,html{height: 100%;}
#outer {height: 100%; overflow: hidden; position: relative;width: 100%; background:ivory;}
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static;}
#inner {position: relative; top: -50%;width: 400px;margin: 0 auto;} /* for explorer only */
div.greenBorder {border: 1px solid green; background-color: ivory;}

　　下面是XHTML代碼：

示例代碼 [m.dounai2.com]

　　我們來(lái)看看最終(未知高居垂直居中)效果的實(shí)例演示：

代碼調(diào)試框 [m.dounai2.com]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>m.dounai2.com</title>
<style type="text/css">

body {padding: 0; margin: 0; font-size: 75%; line-height: 140%; font-family:Arial, Helvetica, sans-serif;}
body,html{height: 100%; }
a{color: #333;}
a:hover{color: green;}
#outer {height: 100%; overflow: hidden; position: relative;width: 100%; background:ivory; }
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;text-align:center;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static;}
#inner {position: relative; top: -50%;width: 600px;margin: 0 auto;text-align:left;}/*for explorer only */
div.greenBorder {border: 1px solid green; background-color: #FFF;}
p{margin: 1em;}

</style>
<script type="text/javascript">
// <![CDATA[
function toggleContent(name,n) {
	var i,t='',el = document.getElementById(name);
	if (!el.origCont) el.origCont = el.innerHTML;
	
	for (i=0;i<n;i  ) t  = el.origCont;
	el.innerHTML = t;
	}
// ]]>
</script>
</head>
<body>
<div   class="d5vhjxl"   id="outer">
  <div   class="ldvjlbb"   id="middle">
    <div   class="fvlpvxj"   id="inner" class="greenBorder">
      <p><a href="javascript:toggleContent('inner',1)">默認(rèn)長(zhǎng)度??<a href="javascript:toggleContent('inner',2)">加長(zhǎng)頁(yè)面</p>
      <p> 1.Div CSS布局 常見(jiàn)問(wèn)題：容器高度1px在IE中達(dá)不到效果 如何設(shè)置最小高度？  <br />
        2.Div CSS布局 常見(jiàn)問(wèn)題：文本輸入框與文本不對(duì)齊(input對(duì)齊同一行的文字)怎么辦？ <br />
        3.Div CSS布局 常見(jiàn)問(wèn)題：網(wǎng)頁(yè)中可以豎寫(xiě)文字、象古代書(shū)籍那樣排版嗎？  <br />
        4.Div CSS布局 常見(jiàn)問(wèn)題：id與class區(qū)別 - 該用id還是用class呢？！  <br />
        5.Div CSS布局 常見(jiàn)問(wèn)題：標(biāo)題元素、段落和強(qiáng)制換行如何正確使用？  <br />
        6.Div CSS布局 常見(jiàn)問(wèn)題：如何在一個(gè)層上面覆蓋一個(gè)高度自適應(yīng)的透明層？ </p>
      <address style="text-align:center; padding: .5em; clear: left;">
      Design by Forestgan 本演示采用創(chuàng)作共用授權(quán)署名和非商業(yè)用途。
      </address>
    </div>
  </div>
</div>
</body>
</html>

[ 可先修改部分代碼再運(yùn)行查看效果 ]