DIV 居中之div水平居中 讓DIV布局居中篇
如何讓DIV居中呢？如何讓DIV盒子水平居中呢？本節DIVCSS5讓大家實現DIV布局水平居中。
一、div居中實現介紹 - TOP
在布局一張網頁時，通常網頁主體框架是居中於瀏覽器中的。實現最外層DIV水平居中與瀏覽器中需要一個條件和一個設置。
假如最外層DIV盒子的CSS命名為“#divcss5”,這個時候為了兼容各大瀏覽器實現最外層的這個盒子居中。
一條件：
這個時候對“body”設置css內容居中樣式（text-align:center）
即CSS代碼：
- body{text-align:center}
一設置：
這個時候對“#divcss5”設置居中必備樣式css margin
即CSS代碼：
- #divcss5{margin:0 auto}
二、DIV居中用法實例 - TOP
為了便於觀察布局居中效果，我們再對“#divcss5”加一個css邊框為黑色，css寬度為300px;高度為100px樣式。
1、最終得到DIV居中的CSS代碼：
- body{ text-align:center}
- #divcss5{margin:0 auto;border:1px solid #000;width:300px;height:100px}
2、對應html代碼片段：
- <div id="divcss5">DIV水平居中案例</div>
3、居中案例截圖
DIV水平居中效果圖
4、在線演示：查看案例