让div相对于浏览器窗口居中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试文件</title>
<style>
#test {
width:200px;
height:200px;
background-color:#FC0;
position:fixed;
}
</style>
<script>
window.onload = function(){
var screen_width = window.screen.availWidth; //获取屏幕宽度
var screen_height = window.screen.availHeight; //获取屏幕高度
var X = (screen_width - 200)/2;
var Y = (screen_height - 200)/2;
var div = document.getElementById("test");
div.style.left=X + "px";
div.style.top=Y + "px";
};
</script>
</head>
<body>
<div id="test"></div>
</body>
</html>
几个关键点说明下：
position:fixed 决定div是相对于浏览器窗口居中，而不是相对于一般意义上的父窗口居中。
必须使用window.onload保证在DOM加载完毕后才执行js，<script>标签的defer属性理论上也能实现此效果，但defer属性只有IE浏览器支持，而且，我用了下，没效果。
时间： 2024-08-10 10:08:27