有時 你需要將 一段文字 或 一張圖片 放在 矩形格子（box）的 中央，以達到 均衡美感。此練習探討不同的 置中方法。各種方法 都各有 優缺點，尤其是 不同的 瀏覽器 會呈現 不同的 結果。請慎選 最適合 你的網頁的方法。
使用 TABLE 置中。最簡單的 置中方法 是用 TABLE 元素，在其中的 TD 元素 宣告 text-align:center。vertical-align:middle 為預設值，所以可以免宣告。
- 風格用法：
<style type='text/css'>
.tbl td {width:350px;
height:250px;
border:solid 1px red;
}
</style>
<table class=tbl>
<tr>
<td style='text-align:center'>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg" />
</td>
</table> - 執行結果：
也可以將 文字 置中。
- 風格用法：
<style type='text/css'>
.tbl2 td {width:200px;
height:100px;
border:solid 1px red;
}
</style>
<table class=tbl2>
<tr>
<td style='text-align:center'>
Hello world!
</td>
</table> - 執行結果：
Hello world!
| 水平與垂直置中（你正在看 第一頁） | : | 第一頁 | 第二頁 | 第三頁 | 第四頁 |
