用CSS來創建一個居中的頁面設計的基本技術相對來說較簡單，不過與同類相比，也簡單不了太多。讓我們看一下，要將這種由來已久的基於表格的設計轉變成用CSS，該怎樣做。
傳統的做法：居中的布局
首先，由於是做比較，讓我們來看一個例子，它是一種基於一個居中表格的頁面設計。圖表A中顯示了一個例子，以下是這個例子的編碼：
<body>
<p> </p>
<table width="80%" border="0" align="center" cellpadding="0"
cellspacing="10"bgcolor="#FFFFFF">
<tr>
<td colspan="2"><h2 align="center">Header</h2></td>
</tr>
<tr>
<td width="150px" valign="top"><h4>Navigation</h4>
<ul>
<li>Let me not to the marriage of true minds</li>
<li>Admit impediments; love is not love</li>
<li>Which alters when it alteration finds</li>
</ul>
</td>
<td valign="top"><p>Main Content -- Love's not
time's fool...</p>
</td>
</tr>
<tr>
<td colspan="2"><hr />
<p>Footer text -- Admit impediments...</p>
</td>
</tr>
</table>
<p> </p>
</body>
< table >這個標簽包括了以下一些屬性，將其寬度定義為頁面寬度的80%，並將該表格置於頁面的中間。在表格的前面有一個空白段落，這就使得頁面的頂端與表格的頂端之間有一些垂直空間。在表格的後面也有一個空白段落，這就使得頁面的底端與表格的底端之間也有一些空間。這個表格包括兩列三行。頂端的單元被合並了，用來放置頁眉，底端的行也合並了，以安置頁腳，而中間那些單元則被分為兩列，一個供放置主要內容，另一個則是導航工具欄。
這是一個簡單的例子，诠釋的是一種多年以來廣為人們使用的技術。在現今的那些應用軟件中，有代表性的主要種包含了嵌套表格，用以創建一種復雜得多的版面設計，不過，它的復雜性雖然被人為加大了，它所采用的基本技術卻並沒有改變。
將居中的設計轉換成使用CSS
要想將這種傳統的基於表格的版面設計轉換成用CSS，你只要用divs來代替那些表格和表格單元就行了。一個div取代表格本身，另一個取代那些單個的表格單元，這些單個的表格單元定義了主要的版面設計元素，諸如標題，頁腳，導航工欄，以及主要內容。每個div都有一個id,且它們的id都是獨一無二的，你可以用一個CSS選擇器來讓它們創建各自不同的樣式，每一種樣式對應於div中的一種，這種對應關系依據id而建立。那個取代表格的div被標上了id=外部，其它那些div則靠他們各自的功能來鑒別。
這是已校訂過的用div代替表格的XHtml的編碼：
<body>
<div id="outer">
<div id="header">
<h2>Header</h2>
</div>
<div id="nav">
<h4>Navigation</h4>
<ul>
<li>Let me not to the marriage of true minds</li>
<li>Admit impediments; love is not love</li>
<li>Which alters when it alteration finds</li>
</ul>
</div>
<div id="main">
<p>Main Content -- Love's not time's fool...</p>
</div>
<div id="footer">
<p>Footer text -- Admit impediments...</p>
</div>
</div>
</body>
注意一下所有那些陳述的格式，原來它們被包括在<table>和<td>標簽中，現在已經被移走了。而那些位於表格前面和後面的空白段落也都不見了。CSS格式會處理所有的格式化以及空間的問題。以下是CSS的編碼，就是這些編碼，將頁面設計成一種居中的樣式，這種設計與前面所說的基於表格的設計很類似：
body {
background-color: #999999;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
div#outer {
width: 80%;
background-color:#FFFFFF;
margin-top: 50px;
margin-bottom: 50px;
margin-left: auto;
margin-right: auto;
padding: 0px;
border: thin solid #000000;
}
div#header {
padding: 15px;
margin: 0px;
text-align: center;
}
div#nav {
width: 25%;
padding: 10px;
margin-top: 1px;
float: left;
}
div#main {
margin-left: 30%;
margin-top: 1px;
padding: 10px;
}
div#footer {
padding: 15px;
margin: 0px;
border-top: thin solid #000000;
}
圖表B http://meadhra.com/CNET/040804/figure-b.Html 顯示了結果，即用CSS執行的一個居中頁面的版面設計。
解析CSS編碼
與基於表格的版面設計比起來，它的主體樣式並沒有什麼變化。它只不過設置了一下背景顏色，默認正文字體以及尺寸大小。
div#outer是其中的一種樣式，它是這一技術的關鍵。這就是前面提到過的以div取代表格的樣式，它創建了居中的盒子，而這個盒子成了包容該頁面所有內容的容器。將寬度設置為80%的規則設定了該div的寬度，就跟表格標簽的相應屬性規定該表格的寬度一樣。與此相類似，background-color:#FFFFFF為div建立了一個白色的背景，就如同表格中bgcolor="#FFFFFF"屬性為表格設置白色背景一樣。margin-top: 50px and margin-bottom: 50px則用頂端和底端的空白來取代表格中用來造成垂直空間的空白段落。
這一技術的關鍵在於，外部div的中心要安排合適。這裡存在一個難題，可以說是我們面臨的一個挑戰，即div沒有像align="center"這樣一個屬性，這與表格不同，表格中有這樣一種屬性。你可以在div的母元素（在本案例，指< body >標簽）中使用text-align: center來將外部div置於中心位置。盡管除了正文以外，大多數浏覽器還會為一些諸如div的塊元素使用該隊列，但是我們有證據可以證明它是對排列正文這一屬性的誤用，而且它會使問題復雜化，就如同你創建一些額外的樣式來使那些已按正常標准對齊的文字重新回到左邊一樣。
用CSS來將塊元素置於中心位置的正確方法是這樣設置：margin-left: auto，margin-right: auto。這就指示浏覽器自動計算頁面兩邊合適的空白寬度，從而將div置於中心。border: thin solid #000000這一規則在外部div的周圍添加了一個邊界，這是因為用CSS添加很容易，而如果用表格的話就很難了。CSS編碼中的其它部份則規定了div的頁眉，頁腳，nav，以及主要內容。
div#header和div#footer則設定了那些div的頁邊空白以及填料。此外，div#header包含了text-align: center這一規則，它可以將頁眉文本置於中心位置，div#footer則包含了border-top: thin solid #000000這一規則，它可以創建一個圍繞該div的頂端邊緣的邊界，而在基於表格的版面設計中，與它相對應的則是位於頁腳上方的一些水平線。
在這個居中的盒子的中央，div#nav和div#main建立了兩個縱列。在div#nav樣式中，float: left這一規則將div推到它的母元素（外部div）的左邊，而width: 25%這一規則將該div的寬度設置為它的母元素的25%。由於該nav div被移到了左端，其寬度也被限定了，這就為主要的div留下了活動空間，讓它可以移到該nav div的右邊，這樣就取得了兩個縱列的效果。div#main樣式包含了左邊頁面空白30%的規則，以讓主要文本排列在一個整齊的縱欄中，而不是分散開來，甚至散到該nav縱欄外面。主要的div左邊的空白頁面比nav div中左邊空白頁面的寬度稍稍大一點。在我的“用CSS漂浮來創建一個三欄頁面版面設計” http://uk.builder.com/webdevelopment/design/0,39026630,39212737,00.htm 一文中，我詳細介紹了一種技術，這一技術是用CSS漂浮來創建頁面設計中的多個縱列的。