實(shí)現(xiàn)DIV頁面垂直居中行之有效的辦法
作者：tgher
DIV頁面垂直居中于瀏覽器，一直是新手朋友比較頭疼的問題，這里向大家描述一下實(shí)現(xiàn)DIV頁面垂直居中的簡單方法，相信你一定會(huì)感興趣。
本文向大家簡單介紹一下DIV頁面垂直居中方法，其實(shí)解決的思路是這樣的：首們需要position:absolute;絕對(duì)定位。而層的定位點(diǎn)，使用外補(bǔ)丁margin負(fù)值的方法。負(fù)值的大小為層自身寬度高度除以二。
DIV頁面垂直居中方法
DIV頁面垂直居中于瀏覽器，一直是新手朋友比較頭疼的問題。其實(shí)解決的思路是這樣的：首們需要position:absolute;絕對(duì)定位。而DIV頁面的定位點(diǎn)，使用外補(bǔ)丁margin負(fù)值的方法。負(fù)值的大小為層自身寬度高度除以二。
如：一個(gè)層寬度是400，高度是300。使用絕對(duì)定位距離上部與左部都設(shè)置成50%。而margin-top的值為－150。margin-left的值為－200。這樣我們就實(shí)現(xiàn)了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頁面布局與規(guī)劃思想
- JavaScript代碼輕松實(shí)現(xiàn)DIV圓角
- 深入學(xué)習(xí)CSS DIV相對(duì)定位語法
- CSS屬性display:inline-block使用揭秘
- Firefox、IE7、IE6瀏覽器兼容問題概念解析
責(zé)任編輯：佚名
來源：
25175.com
