實現DIV頁面垂直居中行之有效的辦法
作者：tgher
DIV頁面垂直居中于瀏覽器，一直是新手朋友比較頭疼的問題，這里向大家描述一下實現DIV頁面垂直居中的簡單方法，相信你一定會感興趣。
本文向大家簡單介紹一下DIV頁面垂直居中方法，其實解決的思路是這樣的：首們需要position:absolute;絕對定位。而層的定位點，使用外補丁margin負值的方法。負值的大小為層自身寬度高度除以二。
DIV頁面垂直居中方法
DIV頁面垂直居中于瀏覽器，一直是新手朋友比較頭疼的問題。其實解決的思路是這樣的：首們需要position:absolute;絕對定位。而DIV頁面的定位點，使用外補丁margin負值的方法。負值的大小為層自身寬度高度除以二。
如：一個層寬度是400，高度是300。使用絕對定位距離上部與左部都設置成50%。而margin-top的值為－150。margin-left的值為－200。這樣我們就實現了DIV頁面垂直居中于瀏覽器的樣式編寫。
例子:
- <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml">
- <head>
- <metahttp-equivmetahttp-equiv="Content-Type"
- content="text/html;charset=utf-8"/>
- <title>25175.com</title>
- <styletypestyletype="text/css">
- DIV{
- position:absolute;
- top:50%;
- left:50%;
- margin:-150px00-200px;
- width:400px;
- height:300px;
- border:1pxsolidred;
- }
- </style>
- </head>
- <body>
- <DIV>DIV頁面垂直居中</DIV>
- </body>
- </html>
【編輯推薦】
- 深入剖析DIV頁面布局與規劃思想
- JavaScript代碼輕松實現DIV圓角
- 深入學習CSS DIV相對定位語法
- CSS屬性display:inline-block使用揭秘
- Firefox、IE7、IE6瀏覽器兼容問題概念解析
責任編輯：佚名
來源：
25175.com
