在初學(xué)Dreamweaver CC 2018的過程中，很多朋友都不知道如何讓DIV自動居中在整個頁面的中間位置。今天我將教大家如何通過CSS來實(shí)現(xiàn)這個效果。步驟一：創(chuàng)建新的HTML網(wǎng)頁啟動DW后，創(chuàng)建

在初學(xué)Dreamweaver CC 2018的過程中，很多朋友都不知道如何讓DIV自動居中在整個頁面的中間位置。今天我將教大家如何通過CSS來實(shí)現(xiàn)這個效果。

步驟一：創(chuàng)建新的HTML網(wǎng)頁

啟動DW后，創(chuàng)建一個新的HTML網(wǎng)頁，并將網(wǎng)頁保存到桌面位置。這樣我們就可以通過快捷鍵F12進(jìn)行實(shí)時在線預(yù)覽效果。

步驟二：添加DIV標(biāo)簽組

在body中添加一個DIV標(biāo)簽組，并為它添加CSS樣式，包括DIV的寬度（width）和高度（height），以及背景顏色，方便我們?yōu)g覽時能夠清楚地看到效果。

步驟三：嵌入式CSS代碼

在頂部的title標(biāo)簽下，輸入嵌入式CSS代碼，并給body定義另一個背景顏色，與DIV的背景色有所區(qū)分。

步驟四：解決頂部和左邊的間距問題

按下快捷鍵F12，在瀏覽器中預(yù)覽實(shí)時效果，你會發(fā)現(xiàn)DIV與背景之間有一定的距離。為了解決這個問題，在body樣式中，添加外邊距和內(nèi)邊距都為0的代碼（margin: 0; padding: 0;），然后保存網(wǎng)頁。

步驟五：實(shí)現(xiàn)DIV自動居中

現(xiàn)在已經(jīng)沒有間距了，接下來我們需要實(shí)現(xiàn)DIV的自動居中。在DIV的樣式中，再添加一個自動居中的代碼（margin: 0 auto）。保存網(wǎng)頁并再次預(yù)覽效果，這次你會成功地實(shí)現(xiàn)DIV的自動居中。

通過以上步驟，你已經(jīng)學(xué)會了如何使用CSS實(shí)現(xiàn)DIV自動頁面居中。希望對你有所幫助！