<!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>
解决方案 »
- event传参
- JS如何使照片只显示居中部分的500*500像素,四周隐藏。
- 父窗口执行子窗口内的函数问题
- 如何实现这样的脚本(急)
- 一个单选按纽能否任意切换选中/不选中
- 动态设置输入框<input>的name属性的值,弄了2天了,晕死
- 关于js中childNodes值的问题
- 一个form中有两个type="image"的input可以吗?如果可以,如何使按第一个input提交到A.jsp,按第二个input提交到b.jsp,下面实现有问题吗?
- 怎样实现在特定的地方显示自己定制的右键菜单?在线等!
- [求助]怎样打印网页中的表单(用控件或编程)?
- JQuery小问题
- jquery.validate.js验证框架的问题
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/
<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>
这个你还要减去菜单栏,工具栏(地址栏),标签栏的高度。
$(function() {
var top = (document.documentElement.clientHeight - $("#my").outerHeight()) / 2;
$("#my").css("top", top);
})
<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>