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

如何讓DIV居中呢？如何讓DIV盒子水平居中呢？本節DIVCSS5讓大家實現DIV布局水平居中。

一、div居中實現介紹 - TOP

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

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

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

即CSS代碼：

1. body{text-align:center}

一設置：

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

1. #divcss5{margin:0 auto}

二、DIV居中用法實例 - TOP

為了便於觀察布局居中效果，我們再對“#divcss5”加一個css邊框為黑色，css寬度為300px;高度為100px樣式。

1、最終得到DIV居中的CSS代碼：

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

2、對應html代碼片段：

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

3、居中案例截圖

DIV水平居中效果圖

4、在線演示：查看案例

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