div在浏览器窗口中居中

让div相对于浏览器窗口居中。

 

方案一：纯粹使用CSS实现

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试文件</title>
<style>
#test {
    /*准备一个长200px 宽200px的div，背景设置成黄色*/
    width: 200px;
    height: 200px;
    background-color: #FC0;
    /*下面是核心代码*/
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
</style>
</head>

<body>
<div id="test"> </div>
</body>
</html>

上面这套方案是比较完美的方案，即便缩放浏览器窗口也能保证div居中。

 

方案二：利用Javascript实现

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

posted @ 2015-06-28 15:23  Levice  阅读(7723)  评论(0)  编辑  收藏  举报