CSS DIV 置中

如果你習慣採用 DIV 來做網頁的排版，那就難免會碰到需要讓 DIV 置中的時候，在大部分主流的瀏覽器中，想要要讓 DIV 置中，僅需要用到 margin 就能夠達成，但在 IE 瀏覽器可就不是這麼一回事囉！這篇分享幾種不同的情況。

一、適用於大部分瀏覽器的 DIV 置中語法

margin:0px auto;

這樣的寫法基本上適用於 FireFox、Google Chrome、Opera 等常見主流瀏覽器。

二、適用於 IE8 的 DIV 置中語法

<div style="text-align:center;background-color:#FFAC55;width:500px;height:50px;">
　<div style="background-color:#FFAFFE;width:300px;height:20px;margin:0 auto;"></div>
</div>

示意圖

這個技巧是使用兩個 <DIV> 來配合，父層的 <DIV> 設定 text-align:center 的意思是區塊內置中對齊。範例中使用到的 background-color 是背景顏色，主要目的僅是讓範例更容易呈現，另外 width 與 height 分別是 div 的寬度與高度。

三、適用於 IE6 與 IE7 的 DIV 置中語法

_margin:0px auto;　//適用於 IE6　*margin:0px auto;　//適用於 IE7

以上的 DIV 置中方式主要是讓整個 DIV 區塊置中，而不是 DIV 內的元素置中，如果你想要讓 DIV 內的文字、圖片或其他元素能夠置中，請參考 CSS text-align 與 CSS 文字垂直置中。