如何實現(xiàn)css整體居中

這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)如何實現(xiàn)css整體居中，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯(lián)公司主要從事成都做網(wǎng)站、成都網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)北碚,十多年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):028-86922220

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

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

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

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

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

網(wǎng)頁布局居中條件

1、對body設(shè)置CSS內(nèi)容居中樣式text-align:center，代碼：body{text-align:center}

2、對最外層對象設(shè)置margin:0 auto樣式，代碼：.php{margin:0 auto}

案例：

為了觀察到布局居中效果，我們CSS命名對象為".php",設(shè)置CSS邊框為黑色，css寬度為400px，css高度為100px。

1、css代碼如下：

<style>

body{text-align:center}

.php{margin:0 auto;width:400px;height:100px;border:1px solid #000}

/* CSS注釋：設(shè)置對象邊框、寬度、高度 便于觀察布局效果 */

</style>

2、HTML代碼片段：

<div class="php">對象php布局居中了</div>

上述就是小編為大家分享的如何實現(xiàn)css整體居中了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享文章：如何實現(xiàn)css整體居中
標題URL：http://bm7419.com/article4/ijpsoe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、營銷型網(wǎng)站建設(shè)、App設(shè)計、企業(yè)建站、移動網(wǎng)站建設(shè)、網(wǎng)站維護

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)