jquery 使浮动层垂直居中，为啥总感觉偏下了？如何垂直居中呢?

<!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" src="jquery.js"></script>
<style type="text/css">div {border:1px solid red; width:200px; height:200px; background-color:#eee; position:absolute;}</style>
<script type="text/javascript"> $(function(){var top = (screen.availHeight - $("#my").outerHeight()) / 2;
$("#my").css("top",top);})</script>
</head>
<body>
<div id="my"></div>
</body>
</html>

解决方案 »

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

var top = ($(document).height() - $("#my").outerHeight()) / 2;
确实是偏下了。
不用jquey行吗？div {border:1px solid red; width:200px; height:200px; top:50%; margin-top:-100px; background-color:#eee; position:absolute;}
试验证明可行的
http://jsfiddle.net/bVSp5/1/
<!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=gbk" />
<title>无标题文档</title>
<script type="text/javascript" src="jq.js"></script>
<style type="text/css">div {border:1px solid red; width:200px; height:200px; background-color:#eee; position:absolute;}</style>
<script type="text/javascript"> $(function(){var top = parseInt($(document).height()/2-$("#my").height()/2);
var left=parseInt($(document).width()/2-$("#my").width()/2);
$("#my").css({"top":top,"left":left});})</script>
</head>
<body>
<div id="my"></div>
</body>
</html> 这样很垂直居中了没。我自己测试过了！IE和FF都还可以！如果有条件可以拿工具测试一下，估计误差也就几豪米吧！呵和！
你们真不细心！你们在网页底部加上下面代码把网页高度拉长，再看看
<div style="height:1900px;"></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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
div {border:1px solid red; width:200px; height:200px; background-color:#eee; position:absolute;top:50%;margin-top:-100px;}
</style>
</head>
<body>
<div id="my"></div>
</body>
</html>
var top = ($(window).height() - $("#my").outerHeight()) / 2 +parseInt($(document).scrollTop())
screen.availHeight
这个你还要减去菜单栏，工具栏（地址栏），标签栏的高度。
$(function() {
      var top = (document.documentElement.clientHeight - $("#my").outerHeight()) / 2;
      $("#my").css("top", top);
    })
   哎！不是我们不细心，再完美的代码，你即使把SINA的首页拿来加点东西，也一样会变型的，哪有100%绝对兼容完美的东西呢？
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <style type="text/css">
        div
        {
            border: 1px solid red;
            width: 200px;
            height: 200px;
            background-color: #eee;
            position: absolute;
        }
        body{height:2000px;}
    </style>
    <script type="text/javascript">
           $(document).ready(function(){
                var ww=$(window).width();
                var wh=$(window).height();
                var dw=$("#my").width();
                var dh=$("#my").height();
                $("#my").css({"left":(ww-dw)/2+$(window).scrollLeft()+"px",
                              "top":(wh-dh)/2+$(window).scrollTop()+"px"});
            })
    </script>
</head>
<body>
    <div id="my">
    </div>
</body>
</html>
ie 6 8 9 ff opera都测试居中