先來看我一個簡單XHTML/HTML檔案程式碼（部分），我們的目的是讓#container水平居中。
<body>
<div id="container">
<h1>content</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
</div>
</body>使用自適應邊界（auto margin）
水平居中任意元素的首選辦法是使用邊界（margin）性質（property），並把左右之值設為auto。但你必須為#container指定一個寬度。
div#container {
margin-left: auto;
margin-right: auto;
width:168px;
}
這個方案在任何當代瀏覽器上都有效，即使是IE6，前提是在web標準相容模式下（compliance mode）。不幸的是，它不會在先前版本的IE/Win中工作。我們為此列一個表格：瀏覽的自適應邊界支援一覽表瀏覽器版本支持
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 所有目前版本是
Mozilla Firefox 所有版本是
Netscape 4.x 否
Netscape 6.x+ 是
Opera 6.0, 7.0 Macintosh and Windows 是
Safari 1.2 是
儘管受到瀏覽器支援的限制，大部分設計師還是提倡你盡可能這樣做。但我們依然可以使用CSS來應付一切情況。使用文字排列（text-align）此方案需要使用到text-align性質，套用給body元素並且賦予center的值。
body{
text-align:center;
}
它公正地對待各種瀏覽器，十分徹底，唾手可得。然而，這是賦予文本的性質，它使#container中的文本也居中了。所以，在佈局上我們還得做一些額外工作：
div#container{
text-align: left;
}
這樣才可以把文字的對齊方式回傳預設狀狀態。綜合邊界和文本排列,因為文本排列向後兼容，當代瀏覽器也支持自適應邊界，很多設計師把他們結合起來，實現跨瀏覽器使用。
body{
text-align: center;
}
#container {
margin-left: auto;
margin-right: auto;
border: 1px solid red;
width: 168px;
text-align: left
}
唉，依然不完美，因為還是一個黑客技巧（hack）。你必須為文本排列寫下多餘的規則。但現在，我們可以使用更完美的跨瀏覽器的方案。
負邊界解決方案