网页居中布局示例-优快云博客

本文链接：https://blog.youkuaiyun.com/peter_666/article/details/8990199

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE>Select Demo</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<style type="text/css">
#centerdiv{
	
	position:absolute;
	border:solid 1px blue;
}
</style>
<script type="text/javascript">

var myWidth;
var myHeight;
var myScroll;
var myScrollWidth;
var myScrollHeight;
function getSize() {
// Window Size
 
	if (self.innerHeight) { // Everyone but IE
		myWidth = window.innerWidth;
		myHeight = window.innerHeight;
		myScroll = window.pageYOffset;
	} else if (document.documentElement && document.documentElement.clientHeight) { // IE6 Strict
		myWidth = document.documentElement.clientWidth;
		myHeight = document.documentElement.clientHeight;
		myScroll = document.documentElement.scrollTop;
	} else if (document.body) { // Other IE, such as IE7
		myWidth = document.body.clientWidth;
		myHeight = document.body.clientHeight;
		myScroll = document.body.scrollTop;
	}

	// Page size w/offscreen areas

	if (window.innerHeight && window.scrollMaxY) {	
		myScrollWidth = document.body.scrollWidth;
		myScrollHeight = window.innerHeight + window.scrollMaxY;
	} else if (document.body.scrollHeight > document.body.offsetHeight) { // All but Explorer Mac
		myScrollWidth = document.body.scrollWidth;
		myScrollHeight = document.body.scrollHeight;
	} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
		myScrollWidth = document.body.offsetWidth;
		myScrollHeight = document.body.offsetHeight;
	}
	
}

function load(){

 getSize();
 
 var cdiv = document.getElementById("centerdiv");
 cdiv.style.top = (myHeight-cdiv.offsetWidth)/2 + "px";
 cdiv.style.left = (myWidth - cdiv.offsetWidth)/2+ "px";
 
}
</script>
</head>
<body οnlοad="load()">
	<div id="centerdiv"  style="width:300px;height:300px;"><div>
</body>
</html>

窗口相对对网页居中