CSS DIV 網頁置中 - CSS 學習筆記

CSS DIV 網頁置中是新一代網頁排板常用到的技巧之一唷！通常說到 DIV 網頁置中，指的是讓 DIV 區塊固定在整個網頁的中間，或者是在父層 DIV 區塊內的置中，用到的技巧有一點點不同，其實要讓 DIV 區塊在網頁置中很簡單，只需要用到 margin 的外距屬性就辦得到。

CSS DIV 網頁置中範例一、在網頁內置中

這個範例 DIV 區塊將在網頁置中，最關鍵的語法有三個，第一個就是 margin 的外距屬性，我們設定了『margin:0 auto;』讓 DIV 區塊的左右兩邊自動平衡，不過光是這樣還不夠，必須設定 DIV 區塊的寬度與高度才能實現。

區塊中的其他 css 語法，background-color 是設定背景顏色用的，padding 是設定內距，color 則是文字顏色，這幾個屬性都只是為了讓範例比較清楚呈現而已，與 DIV 網頁置中效果並沒有關係，若有興趣研究這些 css 常用功能的話，可以看這幾篇的內容。

範例一個語法可以寫在一份空白文件並存檔為 test.html 之後，再用瀏覽器開啟檔案，應該就可以看到一個綠色的區塊在網頁正中間，靠上方的位置。

CSS DIV 網頁置中範例二、在父層 DIV 區塊內置中

呈現效果

範例二是把範例一的效果進一步延伸，讓兩個包在一起的 DIV 區塊能夠置中，第一個 DIV 區塊就是延續範例一的樣式，然後我們在其中再添加一個比較小的 DIV 區塊，同時，將比較小的 DIV 區塊也增加『margin:0 auto;』的屬性值，讓整個範例呈現出兩個 DIV 區塊置中效果。

由這兩個範例可以看出 DIV 網頁置中是一種相對的置中效果，當最外層的 DIV 區塊用這種方式置中，代表其相對於整個網頁置中。第二層的 DIV 區塊用同樣的方式置中，代表是相對於外層的 DIV 置中。換句話說，假設範例二的外層綠色 DIV 區塊並未使用『margin:0 auto;』的屬性值，內層白色的 DIV 區塊依舊會在其內部置中。