让DIV块保持在浏览器窗口中央位置

Myth丶恋晨 2022-06-15 09:12 217阅读 0赞

<html>
    	<head>
    		<script type="text/javascript" src="./jquery-1.4.4.js"></script>
    		<style type="text/css">
    			.divv
    			{
    			    position:absolute;
    			    top:30%;
    			    left:30%;
    			    width:80px;
    			    height:60px;
    			    border:1px solid #666;
    			    background-color:#9CF;
    			    text-align:center;
    			}
    		</style>
    		<script type="text/javascript">
    			$(document).ready(
    				function(){
    					//页面初始化
    					goCenter();
    				
    					//滚动条滚动
    					$(window).scroll(
    						function(){
    							goCenter();
    						}
    					);
    					//拖动浏览器窗口
    					$(window).resize(
    						function(){
    							goCenter();
    						}
    					);
    				}
    			);
    			
    			function goCenter()
    			{
    				var h = $(window).height();
    				var w = $(window).width();
    				var st = $(window).scrollTop();
    				var sl = $(window).scrollLeft();
    
    				$(".divv").css("top", ((h-60)/2)+st);
    				$(".divv").css("left", ((w-80)/2)+sl);
    			}
    		</script>
    	</head>
    	
    	<body>
    		<div class="divv">中央窗口</div>
    	</body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，217人围观）

还没有评论，来说两句吧...

相关阅读

相关让body、Div占满整个浏览器的窗口

今天在研究百度首页的时候，发现内部的div总是能铺满整个窗口，这对于我们自适应页面制作是非常有帮助的。仔细查看之后，发现是因为设置了： html,body{

桃扇骨/ 2022年09月25日 09:18/ 0 赞/ 207 阅读

相关如何让DIV始终保持在屏幕中间

代码： .login\{/\\样式的名字对应class=xxx\\/ width:200px;/\\宽度\\/ height:100px;/\\高度\\/

我就是我/ 2022年08月08日 06:22/ 0 赞/ 185 阅读

相关让表单提交返回后保持在原来提交的位置上

有时候，在网页中点击了页面中的按钮或是刷新了页面后，页面滚动条又会回到顶部，想看后面的记录就又要拖动滚动条，或者要按翻页键，非常不方便，想在提交页面或者在页面刷新的时候仍然保

一时失言乱红尘/ 2022年08月07日 03:41/ 0 赞/ 141 阅读

相关让div在浏览器可视范围居中

这里用到的这几个属性 document.body.clientHeight ，其中还有其他的属性:document.documentElement.clientHeight

短命女/ 2022年08月07日 02:42/ 0 赞/ 175 阅读

相关 window.open窗口显示在屏幕中央

function showNew() \{ var width=200; var height=200; var y=(window.screen

系统管理员/ 2022年07月28日 00:26/ 0 赞/ 216 阅读

相关 Jquery DIV滚动至浏览器顶部位置固定

获取元素（这里定位元素A）距离顶部的高度，接着设定scroll滚动的事件，比如超过那个高度，把A的位置设定为fixed，小于该高度，修改回relative。方法一

梦里梦外;/ 2022年07月16日 02:12/ 0 赞/ 187 阅读

相关让DIV块保持在浏览器窗口中央位置

<html> <head> <script type="text/javascript" src="./jquery-1.4.4.js"></sc

Myth丶恋晨/ 2022年06月15日 09:12/ 0 赞/ 218 阅读

相关 2个div左右铺满整个浏览器，左边div一直保持100px，右边的div跟随浏览器大小变化

方法一：使用flex 效果如图所示： ![Center][] <div class="box"> <div class="left"></div

爱被打了一巴掌/ 2022年06月07日 05:56/ 0 赞/ 182 阅读

相关让div元素自适应浏览器屏幕高度

很多时候都需要让div或者其他标签元素自适应浏览器屏幕高度，比如左侧菜单高度自适应所以可以用window.innerHeight然后绑定到元素上面如图，我用vue，jq

た入场券/ 2022年05月11日 03:36/ 0 赞/ 1015 阅读

相关如何让注册表保持在根目录

Windows XP 在打开\[Regedit\]时会停留在上次使用时的位置，可按下列修改后打开Regedit时便会停在根目录上：在\[开始\]-->\[运行

爱被打了一巴掌/ 2022年01月17日 07:19/ 0 赞/ 183 阅读