js實現元素水平垂直居中

時間 2019-11-13

原文原文鏈接

以前有寫過css/css3實現元素的水平和垂直居中的幾種方法點我，可是css3屬性不是全部瀏覽器都能兼容的，今天寫下js實現未知寬高的元素的水平和垂直居中。css

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				padding:50px;
				display: inline-block;
				background-color:pink;
				position: absolute;
			}
		</style>
		<script>
			window.onload = function(){
//				獲取元素
				var div = document.querySelector('div');
//				設置left 
				div.style.left=(window.innerWidth - div.offsetWidth)/2 + 'px';
//				設置top
				div.style.top= (window.innerHeight- div.offsetHeight)/2 + 'px';
			}
		</script>
	</head>
	<body>
		<div>
			陌上人如玉
			<br />
			公子士無雙
		</div>
	</body>
</html>

若是須要在有滾動條的狀況的下要實現居中的效果，則須要加上scrollTop和scrollLeft。html

相關標籤/搜索