大家在做網(wǎng)頁設(shè)計(jì)寫代碼的時(shí)候，使用最多的就是div了，div能夠?qū)W(wǎng)頁做各種布局，比如div居中就能夠讓網(wǎng)頁的布局看起來非常好看，div居中可以是垂直居中，還可以是水平居中，這個(gè)都有相應(yīng)的操作，其實(shí)使用css也可以實(shí)現(xiàn)div 居中，這個(gè)是可以很方便的實(shí)現(xiàn)網(wǎng)頁布局的，下面新網(wǎng)就給朋友們詳細(xì)的來說明一下div 居中如何操作以及css實(shí)現(xiàn)Div居中的方法是怎樣的等問題，希望提供幫助。

  div 居中如何操作？

  在HTML中的body標(biāo)簽里面寫上div標(biāo)簽，然后我們給div設(shè)置寬高，需要注意，如果不設(shè)置寬度默認(rèn)是100%的哦，這樣就會(huì)占滿整個(gè)頁面。

  然后，我們給div加上深粉色的背景顏色，這樣是方便我們可以直觀的看到div的布局。
 
  然后預(yù)覽div布局的預(yù)覽效果，看得出來，div默認(rèn)是靠近瀏覽器左邊的，距離右邊很遠(yuǎn)，這樣就不是居中對齊。
  接著我們給div設(shè)置margin，第一個(gè)參數(shù)表示頂部的距離為0，而第二個(gè)auto表示的是自動(dòng)。也就是說，設(shè)置這個(gè)之后，div會(huì)自動(dòng)根據(jù)網(wǎng)頁來居中。
  之后，再來瀏覽效果，可以看到此時(shí)的div塊已經(jīng)自動(dòng)居中了，它距離瀏覽器左右兩邊的距離是一樣的。
  CSS實(shí)現(xiàn)Div居中的方法

  利用CSS讓DIV處于一個(gè)永遠(yuǎn)居中的狀態(tài)，不管屏幕如何滑動(dòng)，該p始終保持在屏幕正中央(支持IE7（包括IE7）以上版本)，當(dāng)你看完的時(shí)候你會(huì)覺得很簡單，一點(diǎn)也想不到這樣的簡單。

  方法/步驟
  新建一個(gè)html文件，命名為test.html，用于講解利用CSS怎么讓文字居中。
  在test.html文件內(nèi)，使用div標(biāo)簽創(chuàng)建一個(gè)模塊，并設(shè)置其class屬性為bob，下面將通過該class設(shè)置其css樣式。
  在test.html文件內(nèi)，在div標(biāo)簽內(nèi)，使用p標(biāo)簽創(chuàng)建一行文字，下面將利用CSS讓文字居中。
  在test.html文件內(nèi)，編寫標(biāo)簽，頁面的css樣式將寫在該標(biāo)簽內(nèi)。
  在css標(biāo)簽內(nèi)，對類名為bob的div進(jìn)行樣式設(shè)置，定義其寬度為300px，高度為30px，背景顏色為紅色。
  在css標(biāo)簽內(nèi)，對p元素進(jìn)行樣式設(shè)置，使用text-align屬性設(shè)置文字居中（center），文字顏色為白色。
  在瀏覽器打開test.html文件，查看實(shí)現(xiàn)的效果。
  用CSS控制DIV居中失效的解決方法
  一般情況下DIV居中失效是因?yàn)闆]寫DTD語句，其實(shí)其他很多css的問題也是因?yàn)闆]有加上dtd語句引起的，只要在頭部加上文章中的內(nèi)容，就可以輕松的解決問題！
 
  JS/JQ實(shí)現(xiàn)DIV居中的方法
  1.JS實(shí)現(xiàn)p居中示例
  p居中的方法有很多，就好比上面我們介紹的CSS實(shí)現(xiàn)DIV居中一樣，網(wǎng)上可以找得到，但是本文要介紹的是使用JS實(shí)現(xiàn)的，比較另類，值得我們學(xué)習(xí)。
  2.利用jq讓你的p居中的好方法分享

  DIV居中不僅可以使用CSS、JS實(shí)現(xiàn)，JQ同樣也可以實(shí)現(xiàn)DIV居中，本篇文章就是使用JQ實(shí)現(xiàn)DIV居中的實(shí)例，看完之后你會(huì)發(fā)現(xiàn)代碼簡潔明了，卻又舉一反三。

  div 居中如何操作？以上就給大家介紹了關(guān)于div 居中的操作問題，大家在做div 居中操作的時(shí)候，就可以按照上面的的步驟去執(zhí)行，如果想使用css實(shí)現(xiàn)div 居中的話，其實(shí)也比較簡單，只需要幾步就完成了。如果大家在具體操作的過程中，還有不懂的地方，可以咨詢新網(wǎng)的專業(yè)人員。