這篇“CSS網(wǎng)頁布局居中的方法”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內(nèi)容，內(nèi)容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“CSS網(wǎng)頁布局居中的方法”文章吧。

十載的榆林網(wǎng)站建設經(jīng)驗，針對設計、前端、開發(fā)、售后、文案、推廣等六對一服務，響應快，48小時及時工作處理。全網(wǎng)營銷推廣的優(yōu)勢是能夠根據(jù)用戶設備顯示端的尺寸不同，自動調整榆林建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設計，從而大程度地提升瀏覽體驗。創(chuàng)新互聯(lián)建站從事“榆林網(wǎng)站設計”,“榆林網(wǎng)站推廣”以來，每個客戶項目都認真落實執(zhí)行。

一、讓DIV+CSS網(wǎng)頁布局居中分析介紹

一般網(wǎng)頁主體內(nèi)容布局均為居中于瀏覽器。如DIVCSS5首頁（http://www.創(chuàng)新互聯(lián).com/），主體為居中布局。

網(wǎng)頁布局居中演示截圖

如何使用CSS讓整個網(wǎng)頁布局居中呢？布局居中條件是什么呢？

首先我們要對body設置css內(nèi)容居中樣式（css text-align:center），然后布局最外層DIV盒子時候使用 margin:0 auto即可讓對象布局居中。

當然我們對盒子對象使用了 margin:0 auto，有的瀏覽器不對body對象加text-align:center樣式，布局仍然是居中的，這是因為不同瀏覽器默認樣式不同造成，如果不對body設置text-align:center，這樣會造成有的瀏覽器布局居中，有的靠左，這樣布局的兼容就產(chǎn)生了。

解釋：margin:0 auto，意思是讓對象上下間隔為0，左右間隔自動，隨對象寬度左右間隔自動，擴展了解css margin

二、小結DIV CSS網(wǎng)頁布局居中條件  

1、對body設置CSS內(nèi)容居中樣式text-align:center，代碼：body{text-align:center}
2、對最外層對象設置margin:0 auto樣式，代碼：.創(chuàng)新互聯(lián){margin:0 auto}

三、網(wǎng)頁布局居中實例  

為了觀察到布局居中效果，我們CSS命名對象為".創(chuàng)新互聯(lián)",設置CSS邊框為黑色，css寬度為400px，css高度為100px。

1、css代碼如下：

2、HTML代碼片段：

對象DIVCSS5布局居中了