码迷,mamicode.com
首页 > 其他好文 > 详细

div在浏览器窗口中居中

时间:2015-06-28 16:48:12      阅读:137      评论:0      收藏:0      [点我收藏+]

标签:

让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浏览器支持,而且,我用了下,没效果。

div在浏览器窗口中居中

标签:

原文地址:http://www.cnblogs.com/dige1993/p/4605612.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!