先來看我一個(gè)簡(jiǎn)單XHTML/HTML文件代碼（部分），我們的目的是讓#container水平居中。

div#container?{
 margin-left:?auto;
 margin-right:?auto;
 width:?168px;
}
這個(gè)方案在任何當(dāng)代瀏覽器上都有效，即使是IE6，前提是在web標(biāo)準(zhǔn)兼容模式下（compliance?mode）。不幸的是，它不會(huì)在先前版本的IE/Win中工作。我們?yōu)榇肆幸粋€(gè)表格：

瀏覽的自適應(yīng)邊界支持一覽表?瀏覽器?版本?支持?
InterNET Explorer 6.0, compliance?mode?是?
InterNET Explorer 6.0, quirks?mode?否?
InterNET Explorer 5.5 Windows?否?
InterNET Explorer 5.0 Windows?否?
InterNET Explorer 5.2 Macintosh?是?
Mozilla 所有當(dāng)前版本?是?
Mozilla Firefox?所有版本?是?
NETscape?4.x?否?
NETscape?6.x+?是?
Opera?6.0,?7.0?Macintosh?and?Windows?是?
Safari?1.2?是?

盡管受到瀏覽器支持的限制，大部分設(shè)計(jì)師還是提倡你盡可能這樣做。但我們依然可以使用CSS應(yīng)付一切情況。

使用文本排列（text-align）
此方案需要使用到text-align性質(zhì)，應(yīng)用給body元素并且賦予center的值。

body{
 text-align:center;
}
它公正地對(duì)待各種瀏覽器，十分徹底，唾手可得。然而，這是賦予文本的性質(zhì)，它使#container中的文本也居中了。所以，在布局上我們還得做一些額外工作：

div#container{
 text-align:?left;
}
這樣才可以把文本的對(duì)齊方式返回默認(rèn)狀狀態(tài)。

綜合邊界和文本排列
因?yàn)槲谋九帕邢蚝蠹嫒荩?dāng)代瀏覽器也支持自適應(yīng)邊界，很多設(shè)計(jì)師把他們結(jié)合起來，實(shí)現(xiàn)跨瀏覽器使用。

body{
text-align:?center;
}
#container?{
 margin-left:?auto;
margin-right:?auto;
 border:?1px?solid?red;
 width:?168px;
 text-align:?left
}
唉，依然不完美，因?yàn)檫€是一個(gè)黑客技巧?（hack）。你不得不為文本排列寫下多余的規(guī)則。但現(xiàn)在，我們可以使用更完美的跨瀏覽器的方案。

負(fù)邊界解決方案
此方案得結(jié)合使用絕對(duì)定位（absolute?positioning?）。首先，把#container絕對(duì)定位并左偏移 50%，這樣，#container的左邊界就是頁面分辨率的一半。下一步，把#container的左邊界設(shè)置為負(fù)值，值大小為#container寬 度（width）的一半。

#container?{
background:?#ffc?url(mid.jpg)?repeat-y?center;
 position:?absolute;
 left:?50%;
 width:?760px;
 margin-left:?-380px;
}
看，沒有任何黑客技巧（no?hacks）！連NETscape?4.x都支持！

HTML/CSS技術(shù)：元素水平居中方案全集，轉(zhuǎn)載需保留來源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。