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

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

 一般網(wǎng)頁(yè)主體內(nèi)容布局均為居中于瀏覽器。如億速云首頁(yè)，主體為居中布局。

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

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

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

解釋?zhuān)簃argin:0 auto，意思是讓對(duì)象上下間隔為0，左右間隔自動(dòng)，隨對(duì)象寬度左右間隔自動(dòng)，

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

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

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

案例：

為了觀察到布局居中效果，我們CSS命名對(duì)象為".php",設(shè)置CSS邊框?yàn)楹谏?，css寬度為400px，css高度為100px。

1、css代碼如下：

<style>

body{text-align:center}

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

/* CSS注釋?zhuān)涸O(shè)置對(duì)象邊框、寬度、高度 便于觀察布局效果 */

</style>

2、HTML代碼片段：

<div class="php">對(duì)象php布局居中了</div>

上述就是小編為大家分享的如何實(shí)現(xiàn)css整體居中了，如果剛好有類(lèi)似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。