如何實現未知高居垂直居中？_Div+CSS教程

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

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

　　標準瀏覽器如Mozilla，Opera等，可將父級元素顯示方式設定為TABLE(display: table;) ，內部子元素定為table-cell (display: table-cell)，通過vertical-align特性使其垂直居中，但非標準瀏覽器是不支持的。依然解決不了未知高居垂直居中。

　　非標準瀏覽器只能在子元素里設距頂部50%，里面再套一個容器元素距頂部-50% 來抵消。最終實現未知高居垂直居中的設置。

　　看下面的CSS代碼：

示例代碼 [www.ghpqjb.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代碼：

示例代碼 [www.ghpqjb.com]

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

代碼調試框 [www.ghpqjb.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>www.ghpqjb.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="0y0qqgk"   id="outer">
  <div   class="kyu2emi"   id="middle">
    <div   class="ogk2wce"   id="inner" class="greenBorder">
      <p><a href="javascript:toggleContent('inner',1)">默認長度??<a href="javascript:toggleContent('inner',2)">加長頁面</p>
      <p> 1.Div CSS布局 常見問題：容器高度1px在IE中達不到效果 如何設置最小高度？  <br />
        2.Div CSS布局 常見問題：文本輸入框與文本不對齊(input對齊同一行的文字)怎么辦？ <br />
        3.Div CSS布局 常見問題：網頁中可以豎寫文字、象古代書籍那樣排版嗎？  <br />
        4.Div CSS布局 常見問題：id與class區別 - 該用id還是用class呢？！  <br />
        5.Div CSS布局 常見問題：標題元素、段落和強制換行如何正確使用？  <br />
        6.Div CSS布局 常見問題：如何在一個層上面覆蓋一個高度自適應的透明層？ </p>
      <address style="text-align:center; padding: .5em; clear: left;">
      Design by Forestgan 本演示采用創作共用授權署名和非商業用途。
      </address>
    </div>
  </div>
</div>
</body>
</html>

[ 可先修改部分代碼再運行查看效果 ]