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

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

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

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

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

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

步驟三：嵌入式CSS代碼

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

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

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

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

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

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