DIV CSS 佈局教程網

表格可以實現td中的元素垂直居中顯示，但是前提條件必須定義td的高才可行。

但是很多時候會用到元素跟隨浏覽器的大小垂直居中，如在制作展示官網、活動展示網等等的時候。

問題：

實現div垂直居中並在縮放浏覽器尺寸的時候仍然居中。

解決方案：

1、浏覽器可視區域的高度-元素的高度/2 = 元素距離浏覽器可視區域頂部的距離。
(bodyHeight – divHeight)/2

2、浏覽器可視區域如果小於元素的高度，即元素距離浏覽器可視區域頂部的距離為零。

3、onresize()當浏覽器的尺寸改變的時候觸發事件。使用onresize()每次改變的時候，重新計算一下元素到頂部的距離。

實現代碼：

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);
}

注意事項：

根據浏覽器的不同onresize被觸發的次數都不相同，因此處理的時候要格外小心。

以上就是小編為大家帶來的讓html元素隨浏覽器的大小自適應垂直居中的實現方法全部內容了，希望大家多多支持~