通過(guò)JavaScript使Div居中并隨網(wǎng)頁(yè)大小改變而改變
先看一下居中的原理吧!
先看一張圖。

從圖中看到了什么?可以看到紅色的框居中了,為什么會(huì)居中呢?通過(guò)觀察可以發(fā)現(xiàn)紅框的上下的藍(lán)色的間距線是一樣長(zhǎng)的,這樣可以確保了垂直居中,紅框的左右的綠色間距線也是一樣長(zhǎng)的,這樣可以確保了水平居中。
但是怎么使上下的間距相等呢?左右的間距相等呢?
在看一張圖:

假設(shè)當(dāng)前網(wǎng)頁(yè)的高為350px,寬為400px,而紅框的高為150px,寬為200px,我們可以發(fā)現(xiàn)網(wǎng)頁(yè)的高減去紅框元素的高得到200px像素,而這200px像素正是上下邊距的總和,上下邊距各得到了100px,同理,左右也是一樣的。
有沒(méi)有感覺(jué)到什么?
如果我們知道了網(wǎng)頁(yè)元素的高或?qū)挘瑴p去元素的高或?qū)?,然后在除?,就得到了上下左右邊距的距離。我們通常給元素的定位是怎么定的呢?不都是通過(guò)top和left的坐標(biāo)定的嗎?那么現(xiàn)在紅框的坐標(biāo)是什么呢?
再看一張圖:

紅色框的坐標(biāo)是藍(lán)色的上線100px,和綠色的左線100px,即left和top的值,這兩個(gè)值不是算出來(lái)的嗎?
可以總結(jié)一個(gè)公式:
居中的元素的top =(網(wǎng)頁(yè)高 –元素的高)/ 2;
居中的元素的left= (網(wǎng)頁(yè)寬 –元素的寬) /2;
轉(zhuǎn)化為JavaScript的語(yǔ)法為:
top = (document.body.clientHeight - element.offsetHeight)/2;
left = (document.body.clientWidth - element.offsetWidth)/2
獲取到top和left的坐標(biāo)不就居中了。
以下是居中的完整代碼:
這里要注意幾個(gè)問(wèn)題,要設(shè)置元素的position的屬性為absolute,即絕對(duì)定位,然后添加兩個(gè)事件onload和onresize,要加上px的字符串,offsetHeight是獲取元素自身的高,offsetWidth是獲取元素自身的寬,這就是當(dāng)網(wǎng)頁(yè)加載時(shí)和改變大小時(shí)div都會(huì)居中。不過(guò)這種做法是居中的元素和網(wǎng)頁(yè)的居中,如果想要一個(gè)元素在另一個(gè)元素的內(nèi)部居中的話,原理是一樣的。我們只需要將網(wǎng)頁(yè)的寬和高的代碼改為另一個(gè)元素的寬和高的代碼就行了。另一個(gè)元素的寬和高可以通過(guò)獲取到當(dāng)前元素的parent元素的高和寬。這樣也是可以居中的。如果用jquery這個(gè)框架,那么代碼就更簡(jiǎn)單了。
轉(zhuǎn)載請(qǐng)指明出處。
- jquery實(shí)現(xiàn)拖拽調(diào)整Div大小
- 純js實(shí)現(xiàn)div內(nèi)圖片自適應(yīng)大小(已測(cè)試,兼容火狐)
- jquery動(dòng)態(tài)調(diào)整div大小使其寬度始終為瀏覽器寬度
- js通過(guò)八個(gè)點(diǎn) 拖動(dòng)改變div大小的實(shí)現(xiàn)方法
- JQuery加載圖片自適應(yīng)固定大小的DIV
- javascript實(shí)現(xiàn)div的拖動(dòng)并調(diào)整大小類似qq空間個(gè)性編輯模塊
- js實(shí)現(xiàn)的八點(diǎn)拖動(dòng)修改div大小的代碼
- 利用onresize使得div可以隨著屏幕大小而自適應(yīng)的代碼
- 可拖動(dòng)可改變大小div的實(shí)現(xiàn)代碼
- jQuery拖拽通過(guò)八個(gè)點(diǎn)改變div大小
相關(guān)文章
JavaScript基于SVG的圖片切換效果實(shí)例代碼
這篇文章主要介紹了JavaScript基于SVG的圖片切換效果實(shí)例代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-12-12javascript獲取和判斷瀏覽器窗口、屏幕、網(wǎng)頁(yè)的高度、寬度等
這篇文章主要介紹了javascript獲取和判斷瀏覽器窗口、屏幕、網(wǎng)頁(yè)的高度、寬度等,需要的朋友可以參考下2014-05-05webpack學(xué)習(xí)--webpack經(jīng)典7分鐘入門(mén)教程
這篇文章主要介紹了webpack學(xué)習(xí)--webpack經(jīng)典7分鐘入門(mén)教程,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06javascript跟隨滾動(dòng)效果插件代碼(javascript Follow Plugin)
這篇文章介紹了javascript跟隨滾動(dòng)效果插件代碼(javascript Follow Plugin),有需要的朋友可以參考一下2013-08-08ionic實(shí)現(xiàn)可滑動(dòng)的tab選項(xiàng)卡切換效果
這篇文章主要為大家詳細(xì)介紹了ionic實(shí)現(xiàn)可滑動(dòng)的tab選項(xiàng)卡切換效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08JS實(shí)現(xiàn)頁(yè)面滾動(dòng)到關(guān)閉時(shí)的位置與不滾動(dòng)效果
這篇文章主要介紹了JS實(shí)現(xiàn)頁(yè)面滾動(dòng)到關(guān)閉時(shí)的位置與不滾動(dòng)效果,滾動(dòng)有兩種方案,其一,利用路由中的meta,在離開(kāi)頁(yè)面時(shí)緩存 top 信息,其二,利用keep-alive緩存整個(gè)頁(yè)面。但是僅限于沒(méi)有實(shí)時(shí)數(shù)據(jù)變動(dòng)的頁(yè)面,需要的朋友可以參考下本文2022-06-06JavaScript forEach中return失效問(wèn)題解決方案
這篇文章主要介紹了JavaScript forEach中return失效問(wèn)題解決方案,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-06-06JavaScript設(shè)計(jì)模式之適配器模式介紹
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之適配器模式介紹,適配器模式,一般是為要使用的接口,不符本應(yīng)用或本系統(tǒng)使用,而需引入的中間適配層類或?qū)ο蟮那闆r,需要的朋友可以參考下2014-12-12分享兩個(gè)手機(jī)訪問(wèn)pc網(wǎng)站自動(dòng)跳轉(zhuǎn)手機(jī)端網(wǎng)站代碼
這篇文章主要介紹了分享兩個(gè)手機(jī)訪問(wèn)pc網(wǎng)站自動(dòng)跳轉(zhuǎn)手機(jī)端網(wǎng)站代碼,需要的朋友可以參考下2015-01-01