首頁 > 開發者 > CSS

實現CSS製作網頁時絕對置中問題的總結！

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
 實現CSS製作網頁時絕對置中問題的總結[ 來源:網頁教學網 | 作者: | 時間:2007-05-29 10:22:50 | 收藏本文 ] 【大 中 小】

什麼叫絕對置中？就是說容器到螢幕左右上下四個方向都有間距，並且隨螢幕大小縮放相對不變或者等比例調整，始終居螢幕中間。 絕對置中也有兩種情況，容器的絕對大小和相對大小。 同時有很多方法可以實現，總結起來大致如下：

站.長.站

 

1.利用table特性，在width and height all set 100%的時候，可以把容器嵌套在td內形成絕對置中，此時的被嵌套容器可為絕對或者相對大小。（非標準）注意不能加聲明！ 中國站長.站

如是在標準模式下要加樣式body,html{height:100%;padding:0;margin:0;} 中國站.長站

以下為引用的內容：

<table width="100%" height="100%" border="0"align="center" cellpadding="0" cellspacing="0">
<tr>
<td style="text-align:center;">
<table width="200" height="50" border="0" cellpadding="0" cellspacing="0" bgcolor="#ef1122">
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</table> 站長.站

中.國站長站

 

2.利用負邊距方法，絕對位置使容器相對螢幕絕對置中，此時的被嵌套容器只能為絕對大小。（標準）根據margin負值和top left的比例控制，實現隨螢幕絕對置中，容器大小改變需要重新調整margin top left的參數： Www.Chinaz.com

以下為引用的內容：

<div style="background:#f00; width:740px; height:340px; left:50%; margin:-170px 0 0 -370px; position:absolute; top:50%;">
</div> Chinaz.com

Chinaz^com

 

3.老外給出的另類方法，巧妙利用display:inline-block;，IE6.0測試通過。（標準）

中國站.長.站

 

注意1.height:100%是關鍵：2.edge與container沒有嵌套關係： 站.長站

這應該算是IE的一個bug，個人對display:inline-block理解有限。edge可以看作一個填充，container現在是一個上下置中的對象，加了背景色能看的更清楚，當然你也可以在container內添加任何絕對或者相對大小容器。但問題在於span只是一個內嵌元素，在內部添加區塊層級元素是不標準的邏輯。 站.長.站

以下為引用的內容：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
  <html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><BR>
<title>無標題文檔</title>

中國站長.站

<style type="text/css">
<!--body { margin:0; height:100%;}
#edge { width:0; height:100%; display:inline-block; vertical-align:middle;}#container { text-align:center; width:100%; display:inline-block; vertical-align:middle;}-->
</style>
</head>
<body>
<!-- required for xhtml1.1 validation only -->
<span id="edge"></span><span id="container">
<div style="width:200px; height:50px; background:#f00; line-height:50px;">僅IE6.0環境下實現</div>
</span>
</body>
</html>

中國.站長站

4.CSS行為expression控制實現，不過expression為IE專屬，並且耗資源嚴重，尤其在大量使用的時候。（標準）

Www_Chinaz_com

 

注意關鍵定義，不要以為height:100%在IE內是沒用的：

中國站長_站,為中文網站提供動力

 

即時擷取螢幕高寬值，分別減去容器高寬值再除以2，得到準確座標絕對位置： 中國.站.長站

以下為引用的內容：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title><style type="text/css"> Www^Chinaz^com
<!--html,body { height:100%;}--></style>
</head>
<body>
<div style="background:#f00; position:absolute; left:expression((body.clientWidth-50)/2); top:expression((body.clientHeight-50)/2);width:50px;;height:50px;"></div>
</body>
</html>

　　
5.FF1.5測試通過，絕對位置，邊距為比例，此時容器高寬始終為viewport的50%相對大小（標準）：

中國站.長.站

 

以下為引用的內容：

<div style="position:absolute; top:0; right:0; bottom:0; left:0; width:50%; height:50%; margin:auto; background:#f00; color:white; line-height:20px; text-align:center;">FF1.5測試通過</div>

中國站長_站,為中文網站提供動力

 

站長.站

6.FF1.5測試通過，絕對位置，直接定位上下左右，強制邊局實現容器相對大小（標準）： [中國站長站]

代碼：略 Chinaz.com

7.ff1.5 IE5 IE6通過測試 中國站.長.站

以下為引用的內容：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vertical centering in valid CSS</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 id="outer">
  <div id="middle"> 中國站長_站,為中文網站提供動力
    <div id="inner" class="greenBorder">
      <p><a href="javascript:toggleContent('inner',1)">預設長度</a>  <a href="javascript:toggleContent('inner',2)">加長頁面</a></p>
      <p> 1.開啟illustrator,建立一個檔案，畫個矩形，比你要匯入的圖片大一些，白色填充。 <br />
        2.選中矩形，菜單：Effect > Distort & Transform > Zig Zag，設定如。 <br />
        3.菜單：Effect > Stylize > Drop Shadow，設定如。 <br />
        1.開啟illustrator,建立一個檔案，畫個矩形，比你要匯入的圖片大一些，白色填充。 <br />
        2.選中矩形，菜單：Effect > Distort & Transform > Zig Zag，設定如。 <br />
        3.菜單：Effect > Stylize > Drop Shadow，設定如。</p> Www_Chinaz_com
      <address style="text-align:center; padding: .5em; clear: left;">
      Design by <a href="//www.webjx.com">Webjx</a> 本示範採用<a href="//www.creativecommons.cn/">創作共用授權</a>--署名和非商業用途。
      </address>
    </div>
  </div>
</div>
<script src="//www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-152060-1";
urchinTracker();
</script>
<noscript><p>google-analytics</p></noscript>
<script src="//www.webjx.com/*/*.js" type="text/javascript"></script>
<noscript><p>stat.</p></noscript>
</body>
</html> Www@Chinaz@com

 

中國站.長站

8.利用expression(僅對IE)

站長.站

 

以下為引用的內容：

<div style="background:blue;position:absolute;left:expression((body.clientWidth-50)/2);top:expression((body.clientHeight-50)/2);width:50;height:50"></div> Chinaz.com

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
css ellipsis css oblique css scheduler css selectors css alarms skin css lynda css
相關文章
css實現滑鼠滑過改變文字(中文變英文)
selenium使用Xpath+CSS+JavaScript+jQuery的定位方法（治療selenium各種定位不到，點...
使用CSS巧妙地製作背景色漸層動畫執行個體
詳解css display屬性中常見的四個屬性值用法（代碼執行個體）
CSS修改iframe內的樣式問題
如何用CSS改變上劃線、底線以及刪除線的顏色呢？

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More