javascript設定層在視窗中垂直水平居中
將一個div層設定為垂直水平居中狀態是常有的操作,例如彈出一個登陸框或者提示框之類的效果,下面就通過程式碼例項介紹一下如何實現此功能,程式碼如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> *{ margin:0px; padding:0px; } #thediv{ width:100px; height:100px; background-color:red; position:absolute; } </style> <script type="text/javascript"> function setCenter(){ var odiv = document.getElementById("thediv"); odiv.style.left="50%"; odiv.style.top="50%"; odiv.style.marginLeft="-50px"; odiv.style.marginTop="-50px"; } window.onload=function(){ setCenter(); } </script> </head> <body> <div id="thediv"></div> </body> </html>
以上程式碼實現了我們的要求,下面簡單介紹一下它的實現原理。
實現原理:
將div設定為絕對定位, 然後設定它的left和top屬性值分別為50%,這個時候是div的左上角實現了垂直水平居中,而這裡要的是div的中心點垂直水平居中,所以再分別上移和左移高度和寬度的一半尺寸即可實現此效果。
相關文章
- CSS視窗垂直水平居中CSS
- jQuery實現的div在視窗中垂直水平居中效果jQuery
- CSS 實現元素在當前視窗水平垂直居中CSS
- div始終在視窗中垂直水平居中程式碼例項
- 設定圖片在div中垂直水平居中
- 設定圖片水平垂直居中
- 使用javascript動態設定div垂直水平居中程式碼JavaScript
- 淺談居中問題(水平居中、垂直居中、水平垂直居中)
- css設定元素在瀏覽器中垂直水平居中程式碼例項CSS瀏覽器
- jQuery將div在視窗中垂直居中例項程式碼jQuery
- Qt中設定視窗居中顯示QT
- css實現的彈出視窗始終垂直水平居中效果CSS
- qt設定視窗在桌面居中顯示QT
- CSS垂直居中和水平居中CSS
- CSS水平居中和垂直居中CSS
- css水平垂直居中CSS
- CSS垂直水平居中CSS
- 元素垂直水平居中
- 水平居中、垂直居中、水平垂直居中、浮動居中、絕對定位居中…….幫你搞定
- css 圖片在div中垂直水平居中CSS
- div中巢狀div水平垂直居中巢狀
- 元素水平居中,垂直居中方法
- 設定<img>圖片垂直水平居中程式碼例項
- Qt 設定視窗居中顯示QT
- CSS水平居中和垂直居中的方法CSS
- css如何設定文字在li元素中垂直居中顯示CSS
- 點選彈出水平垂直居中視窗程式碼例項
- 如何實現水平垂直居中?
- css水平、垂直居中的方法CSS
- css div全屏水平垂直居中CSS
- CSS按鈕垂直水平居中CSS
- 16種方法實現水平居中垂直居中
- CSS的垂直居中和水平居中總結CSS
- CSS佈局之水平居中和垂直居中CSS
- css-水平居中、垂直居中(初級篇)CSS
- css垂直居中怎麼設定?文字上下居中和圖片垂直居中CSS
- 調整視窗大小也能夠實現div水平垂直居中程式碼例項
- 水平垂直居中的實現方法