讓html元素隨瀏覽器的大小自適應(yīng)垂直居中的實現(xiàn)方法
更新時間：2016年10月12日 09:34:07 投稿：jingxian
下面小編就為大家?guī)硪黄宧tml元素隨瀏覽器的大小自適應(yīng)垂直居中的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
表格可以實現(xiàn)td中的元素垂直居中顯示，但是前提條件必須定義td的高才可行。
但是很多時候會用到元素跟隨瀏覽器的大小垂直居中，如在制作展示官網(wǎng)、活動展示網(wǎng)等等的時候。
問題：
實現(xiàn)div垂直居中并在縮放瀏覽器尺寸的時候仍然居中。
解決方案：
1、瀏覽器可視區(qū)域的高度-元素的高度/2 = 元素距離瀏覽器可視區(qū)域頂部的距離。
(bodyHeight – divHeight)/2
2、瀏覽器可視區(qū)域如果小于元素的高度，即元素距離瀏覽器可視區(qū)域頂部的距離為零。
3、onresize()當(dāng)瀏覽器的尺寸改變的時候觸發(fā)事件。使用onresize()每次改變的時候，重新計算一下元素到頂部的距離。
實現(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);
}
注意事項：
根據(jù)瀏覽器的不同onresize被觸發(fā)的次數(shù)都不相同，因此處理的時候要格外小心。
以上就是小編為大家?guī)淼淖宧tml元素隨瀏覽器的大小自適應(yīng)垂直居中的實現(xiàn)方法全部內(nèi)容了，希望大家多多支持腳本之家~
相關(guān)文章
這篇文章主要給大家總結(jié)介紹了關(guān)于JavaScript中常用的簡潔高級技巧，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者使用Javascript具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
js 下拉菜單實現(xiàn)代碼，原理比較簡單，需要的朋友可以參考下，具體的美化要靠自己。2010-05-05
本篇文章主要給大家講述了JavaScript體驗異步更好的解決辦法，有這方面需要的朋友跟著學(xué)習(xí)參考下吧。2018-01-01
破解Session cookie的方法...2006-07-07
這篇文章主要介紹了JavaScript生成.xls文件的代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-12-12
做項目時候常常遇到，要做一個數(shù)字滾動增加的效果。如何利用JavaScript實現(xiàn)數(shù)字增長效果，一起來跟本文學(xué)習(xí)學(xué)習(xí)。2016-07-07
livereload工具實現(xiàn)前端可視化開發(fā)【推薦】
本文將介紹一個工具--livereload。這是一款能根據(jù)你本地文件(html、css、js)的變化，自動跟蹤刷新瀏覽器的實時刷新工具，有了這個工具，會大大減輕你刷新頁面的工作量。下面跟著小編一起來看下吧2016-12-12
這篇文章主要介紹了Javascript中Array用法,實例分析了javascript中數(shù)組的遍歷、傳值、比較等常用技巧,需要的朋友可以參考下2015-06-06
環(huán)形加載進(jìn)度條封裝（Vue插件版和原生js版）
這篇文章主要為大家詳細(xì)介紹了環(huán)形加載進(jìn)度條封裝，Vue插件版，原生js版，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
JS基礎(chǔ)之undefined與null的區(qū)別分析
在JavaScript開發(fā)中，被人問到：null與undefined到底有啥區(qū)別？一時間不好回答，特別是undefined，因為這涉及到undefined的實現(xiàn)原理。2011-08-08