DIV居中之div水平居中 讓DIV佈局居中

DIV 居中之div水平居中 讓DIV佈局居中篇

如何讓DIV居中呢？如何讓DIV盒子水平居中呢？本節DIVCSS5讓你們實現DIV佈局水平居中。

1、div居中實現介紹   -   TOP

在佈局一張網頁時，一般網頁主體框架是居中於瀏覽器中的。實現最外層DIV水平居中與瀏覽器中須要一個條件和一個設置。

假如最外層DIV盒子的CSS命名爲「#divcss5」,這個時候爲了兼容各大瀏覽器實現最外層的這個盒子居中。

一條件：
這個時候對「body」設置css內容居中樣式（text-align:center）

即CSS代碼：

body{text-align:center}

一設置：

這個時候對「#divcss5」設置居中必備樣式css margin
即CSS代碼：

#divcss5{margin:0 auto}

2、DIV居中用法實例   -   TOP

爲了便於觀察佈局居中效果，咱們再對「#divcss5」加一個css邊框爲黑色，css寬度爲300px;高度爲100px樣式。

一、最終獲得DIV居中的CSS代碼：

body{ text-align:center}
#divcss5{margin:0 auto;border:1px solid #000;width:300px;height:100px}

二、對應html代碼片斷：

<div id="divcss5">DIV水平居中案例</div>

三、居中案例截圖

DIV水平居中效果圖

四、在線演示：查看案例