如让DIV 块垂直局中？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>

<div style="width:100px; height:100px; background-color:red;"></div>

</body>
</html>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<div style="position:absolute; top:50%; left:50%;width:100px; height:100px; background-color:red;"></div>
改这样试试行不？百分百精确很难，实测，因为一般屏幕的最大范围跟可视范围也许不同，还需要更改其他数值，也许40%更合适些。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function returnStyle(obj,styleName){
var myObj = typeof obj == "string" ? document.getElementById(obj) : obj;
if(document.all){
return eval("myObj.currentStyle." + styleName);
} else {
return eval("document.defaultView.getComputedStyle(myObj,null)." + styleName);
}
}
window.onload = function(){
var page = document.documentElement.clientHeight;
var div = document.getElementById('test');
var height = parseInt(returnStyle(div,'height'));
div.style.top = ((page-height)/2) + 'px';
};
</script>
<style type="text/css">
#test {
height:100px;
width:100px;
background-color:#eee;
position:absolute;
}
</style>
</head><body>
<div id="test"></div>
</body>
</html>
如果DIV宽度与高度不变，相当easy：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>

<div style="width:100px; height:100px; left:50%; top:50%; margin-left:-50px; margin-top:-50px; position:absolute; background-color:red;"></div>

</body>
</html>
顶楼上。
绝对定位的DIV绝对居中 ~很方便 ~
window.onload = function(){ document.getElementById('test').style.top = ((document.documentElement.clientHeight-div.offsetHeight)/2) + 'px';
    };
如果是固定宽高的话何须js
但是我认为弹出的div需要resize的。所以我想还是js来控制吧
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="author" content="Chomo" />
        <link rel="start" href="http://www.14px.com" title="Home" />
        <title>根据内容宽度、高度自适应，垂直水平居中，内容高度超过窗体时，垂直居顶</title>
        <style type="text/css">
            * { margin:0; padding:0; list-style:none; font-size:14px;}/*---该css reset仅用于demo，请自行换成适合您自己的css reset---*/
            html { height:100%;}
            body { height:100%; text-align:center;}
            .centerDiv { display:inline-block; zoom:1; *display:inline; vertical-align:middle; text-align:left; width:200px; padding:10px; border:1px solid #f60; background:#fc0;}
            .hiddenDiv { height:100%; overflow:hidden; display:inline-block; width:1px; overflow:hidden; margin-left:-1px; zoom:1; *display:inline; *margin-top:-1px; _margin-top:0; vertical-align:middle;}
        </style>
    </head>
    <body>

        <div class="centerDiv">
            蓝色理想<br/>
        </div><div class="hiddenDiv"></div>
    </body>
</html>
*{margin:0 auto;padding:0}
可以使DIV在左右居中在上下中间居中
可以控制TOP属性
<script>
var c_h = document.body.clientHeight?document.body.clientHeight : document.documentElement.clientHeight;
c_h = c_h.substring(0,c_h.length-2);
var div_height = 获得div.style.height;
div_height = div_height.substring(0,div_height.length-2);
var div_Object = document.getElementById("div_id");
div_Object.style.top = (c_h - div_height) / 2 + "px";
</script>