這篇文章給大家介紹實現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頁面垂直居中行的辦法是什么就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
