讓html元素隨瀏覽器的大小自適應(yīng)垂直居中的實(shí)現(xiàn)方法
表格可以實(shí)現(xiàn)td中的元素垂直居中顯示，但是前提條件必須定義td的高才可行。
但是很多時(shí)候會(huì)用到元素跟隨瀏覽器的大小垂直居中，如在制作展示官網(wǎng)、活動(dòng)展示網(wǎng)等等的時(shí)候。
問(wèn)題：
實(shí)現(xiàn)div垂直居中并在縮放瀏覽器尺寸的時(shí)候仍然居中。
解決方案：
1、瀏覽器可視區(qū)域的高度-元素的高度/2 = 元素距離瀏覽器可視區(qū)域頂部的距離。
(bodyHeight – divHeight)/2
2、瀏覽器可視區(qū)域如果小于元素的高度，即元素距離瀏覽器可視區(qū)域頂部的距離為零。
3、onresize()當(dāng)瀏覽器的尺寸改變的時(shí)候觸發(fā)事件。使用onresize()每次改變的時(shí)候，重新計(jì)算一下元素到頂部的距離。
實(shí)現(xiàn)代碼：
function divMiddle(){
var dairyBox = document.getElementById('dairyBox');
var divHeight = dairyBox.offsetHeight;
var bodyHeight = document.body.offsetHeight;
if(bodyHeight > divHeight){
var endHeight = parseInt(bodyHeight - divHeight)/2;
dairyBox.style.marginTop = endHeight + "px";
}else{
dairyBox.style.marginTop = 0;
dairyBox.style.top = 0;
}
}
if(document.all){
window.attachEvent('onload',divMiddle);
}else{
window.addEventListener('load',divMiddle,false);
}
var resizeTimer = null;
window.onresize = function(){
resizeTimer = resizeTimer?null:setTimeout(divMiddle,0);
}
注意事項(xiàng)：
根據(jù)瀏覽器的不同onresize被觸發(fā)的次數(shù)都不相同，因此處理的時(shí)候要格外小心。
以上就是小編為大家?guī)?lái)的讓html元素隨瀏覽器的大小自適應(yīng)垂直居中的實(shí)現(xiàn)方法全部?jī)?nèi)容了，希望大家多多支持腳本之家~
相關(guān)文章
本篇文章主要是對(duì)js處理自己不能定義二維數(shù)組的方法進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望讀大家有所幫助2014-03-03
js+canvas實(shí)現(xiàn)飛機(jī)大戰(zhàn)
這篇文章主要為大家詳細(xì)介紹了js?canvas實(shí)現(xiàn)飛機(jī)大戰(zhàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
這篇文章主要介紹了Bootstrap CDN和本地化環(huán)境搭建的方法，非常不錯(cuò)具有參考借鑒價(jià)值，感興趣的朋友跟著小編一起學(xué)習(xí)吧2016-10-10
基于Bootstrap的Metronic框架實(shí)現(xiàn)條碼和二維碼的生成及打印處理操作
這篇文章主要介紹了基于Bootstrap的Metronic框架實(shí)現(xiàn)條碼和二維碼的生成及打印處理操作的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-08-08
Javascript 對(duì)cookie操作詳解及實(shí)例
這篇文章主要介紹了Javascript 對(duì)cookie操作詳解及實(shí)例的相關(guān)資料,大家在開(kāi)發(fā)網(wǎng)站的時(shí)候，都會(huì)用到cookie 這里就詳細(xì)介紹下，需要的朋友可以參考下2016-12-12
window.onload()方法用于在網(wǎng)頁(yè)加載完畢后立刻執(zhí)行的操作，即當(dāng) HTML 文檔加載完畢后，立刻執(zhí)行某個(gè)方法。本文將用window.onload()打造黑客代碼雨效果，感興趣的可以嘗試一下2022-06-06
JS 有趣的eval優(yōu)化輸入驗(yàn)證實(shí)例代碼
這篇文章介紹了eval優(yōu)化輸入驗(yàn)證實(shí)例代碼，有需要的朋友可以參考一下2013-09-09
這篇文章主要為大家介紹了cypress中豐富的調(diào)試工具及使用示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
iscroll.js的上拉下拉刷新時(shí)無(wú)法回彈的解決方法
本文給大家分享的是在IOS瀏覽器中使用iscroll.js的上拉下拉刷新時(shí)當(dāng)手指劃出屏幕后無(wú)法回彈的解決方法，希望對(duì)大家能夠有所幫助。2016-02-02
JavaScript實(shí)現(xiàn)可終止輪詢請(qǐng)求的方法
輪詢請(qǐng)求就是間隔相同的時(shí)間（如5s）后不斷地向服務(wù)端發(fā)起同一個(gè)接口的請(qǐng)求，當(dāng)然不能無(wú)限次去請(qǐng)求，所以輪詢必須要有個(gè)停止輪詢的機(jī)制，今天通過(guò)本文給大家介紹JavaScript實(shí)現(xiàn)可終止的輪詢請(qǐng)求，感興趣的朋友一起看看吧2022-06-06