讓div自適應瀏覽器視窗居中顯示

2022-06-21 09:18:13 字數 1137 閱讀 9643

今天做 banner 時發現乙個問題，就是瀏覽器視窗水平拉伸時 banner 圖未能居中，所以網上找了些資料，自己寫了個小 demo

html**：

<


div 


class


="div1"


>


<


div 


class


="div2"


>自適應瀏覽器水平垂直居中


div>


div>
css**：

.div1.div2
原理就是，先用left：50%；

top：50%； 讓這個 div 的左上角位於頁面正中，如圖：

然後再利用 margin-left：－600px；margin-top:-200px；使div向左向上移動它自身寬高的一半，最終效果：

今天做 banner 時發現乙個問題，就是瀏覽器視窗水平拉伸時 banner 圖未能居中，所以網上找了些資料，自己寫了個小 demo

html**：

<


div 


class


="div1"


>


<


div 


class


="div2"


>自適應瀏覽器水平垂直居中


div>


div>
css**：

.div1.div2
原理就是，先用left：50%；

top：50%； 讓這個 div 的左上角位於頁面正中，如圖：

然後再利用 margin-left：－600px；margin-top:-200px；使div向左向上移動它自身寬高的一半，最終效果：

讓div自適應瀏覽器視窗居中顯示

今天做 banner 時發現乙個問題，就是瀏覽器視窗水平拉伸時 banner 圖未能居中，所以網上找了些資料，自己寫了個小 demo html div class div1 div class div2 自適應瀏覽器水平垂直居中 div div css div1.div2原理就是，先用left 50...

讓Div垂直居中於瀏覽器視窗

層垂直居中於瀏覽器，一直是新手朋友比較頭疼的問題。其實解決的思路是這樣的 首們需要position absolute 絕對定位。而層的定位點，使用外補丁margin負值的方法。負值的大小為層自身寬度高度除以二。如 乙個層寬度是400，高度是300。使用絕對定位距離上部與左部都設定成50 而margi...

讓Flash自適應瀏覽器螢幕大小

讓flash自適應瀏覽器螢幕大小 要讓flash自適應瀏覽器螢幕大小需要做到以下兩點 1 swf檔案隨著瀏覽器螢幕大小也相應改變大下 方法 在網頁裡除了放你的swf檔案外不要放其他的任何內容，並且swf檔案的寬，高都設為100 可以看我的原始檔裡的fullscreen.htm檔案 2 當swf檔案大...