div垂直居中 css div盒子上下垂直居中,讓DIV盒子在任何瀏覽器中任何分辨率的顯示屏瀏覽器中處於水平居中和上下垂直居中。
div垂直居中常用於單個盒子，如一個頁面里只有一個登錄布局，使用div css讓這個登錄布局水平和css垂直居中。
這里介紹一種最簡單兼容性最好的水平居中與上下垂直居中的方法。
1、具體實例代碼如下
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title>上下垂直居中 在線演示 DIVCSS5</title>
- <style>
- #main {position: absolute;width:400px;height:200px;left:50%;top:50%;
- margin-left:-200px;margin-top:-100px;border:1px solid #00F}
- /*css注釋：為了方便截圖，對CSS代碼進行換行*/
- </style>
- <body>
- <div id="main">DIV水平居中和上下垂直居中</div>
- </body>
- </html>
這里設置一個“#main”對象樣式，寬400px,高200px，使用了絕對定位position樣式同時使用絕對定位left和top，並且同時設置margin-top和margin-left,為了觀察到效果，所以對此div盒子加了個紅色邊框。
2、實例截圖
div+css實現div對象同時上下垂直居中和水平居中截圖
3、水平垂直居中原理介紹
這里使用了絕對定位position:absolute，使用left和top設置對象距離上和左為50%，但如果設置50%，實際上盒子是沒有實現居中效果，所以又設置margin-left:-200px;margin-top:-100px;，這里有個技巧是，margin-left的值是寬度一半，margin-top的值也是對象高度一半，同時設置為負，這樣就實現了水平和垂直居中。
相關CSS教程推薦：
1）、CSS圖片居中
2）、html文字居中
3）、css字體居中
4)、div水平居中
5）、css字體垂直居中
6）、div css布局居中代碼
7）、ie9文字字體垂直居中
4、在線演示：查看案例
5、完整案例html+css打包下載：
如需轉載，請注明文章出處和來源網址：http://www.divcss5.com/jiqiao/j645.shtml