`

js 设置div 页面居中

jsdiv居中随页面变化
阅读更多 


<HTML>
	<HEAD>
		<TITLE>js根据页面大小变化设置div左右居中</TITLE>
	</HEAD>
	<body>
		<div id="" style="border: solid; width: 100%; height: 100px">
			说明:js根据页面大小变化设置div左右居中, 要应用js代码，要设置position：absolute
		</div>
		<div id="mydiv"
			style="border: solid; background-color: red; width: 100px; position: absolute">
			此为居中的div
		</div>
		<!-- <div style="border:solid;height:100px;width:100px">2</div> -->
	</body>
	<script type="text/javascript">
var mydiv = document.getElementById("mydiv");
var mydiv_resize = function() {
	mydiv.style.left = (document.body.clientWidth - 100) / 2;//100为mydiv的宽度
	mydiv.style.height = document.body.clientHeight / 2;
}
mydiv_resize();
window.onresize = mydiv_resize;
</script>
</HTML>
分享到：
| 常用的js 刷新页面的方法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    HTMl、js中设置div的透明度(非常实用)、div居中

    非常实用的页面制作，用于设置div的透明度，以及div在页面左右居中

    通过JavaScript使Div居中并随网页大小改变而改变

    以前的想法是通过CSS+Div使div居中，但是现在的想法变了，通过JavaScript可以简单的使Div在页面上居中，随着网页大小的改变做出相应的改变。而且只要明白了居中的原理轻而易举的就可以实现了。 先看一下居中的原理吧...

    Jquery弹出div层窗口以及div屏幕居中,背景滤镜效果,div拖拽效果

    Jquery弹出div层窗口以及div屏幕居中, 背景滤镜效果, div拖拽效果 在IE和FireFox测试通过!

    浮动的div自适应居中显示的js代码

    当div是浮动的时候浏览器窗口发生变化的时候不能居中显示（因为浮动的时候一般设定的有left或者right值） 可以先用jquery获取外围的div随浏览器变化而变化的宽度（加上监听事件） 之后再获取div的宽度 例如： 代码...

    Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法

    这两天要用到正好练练手,比想象中碰到的问题要多,比如: ie6背景透明 ie6居中显示 还有对js对象的理解 openID=显示按钮,conID=需要显示的div,closeID=关闭按钮 解决了: 1.可以遮挡ie6下的select元素 但是在ie6下div...

    css3代码属性Flexbox实现内部div上下居中效果.zip

    首先还是那句老话，非常幸运我们现在可以使用CSS3布局...现在在移动终端基本上都可以支持flex布局，可以简便、完整、响应式的实现各种布局页面。 今天给大家推荐的只是它实现内元素垂直居中的案例，以后还会推荐。。。

    《精通CSS+DIV网页样式与布局》光盘源码

    　第7章　用CSS设置页面和浏览器的元素　 　7.1　丰富的超链接特效 　7.2　鼠标特效 　7.3　页面滚动条　 　第8章　用CSS制作实用的菜单　 　8.1　项目列表　 　8.2　无需表格的菜单　 　8.3　菜单的横竖转换　 　...

    精通CSS.DIV.网页样式与布局 源码

    　第7章　用CSS设置页面和浏览器的元素　 　7.1　丰富的超链接特效 　7.2　鼠标特效 　7.3　页面滚动条　 　第8章　用CSS制作实用的菜单　 　8.1　项目列表　 　8.2　无需表格的菜单　 　8.3　菜单的横竖转换...

    精通CSS+DIV网页样式与布局视频教材

    精通CSS+DIV网页样式与布局 视频教材主要内容 迅雷下载地址： 目录 第1部分　CSS基础知识篇 第1章　CSS的初步体验 1.1　CSS的概念 1.1.1　标记的概念 1.1.2　传统HTML的缺点 1.1.3　CSS的引入 1.1.4...

    如何让一个div居于页面正中间【实现方法】

    如何让一个div居于页面中间，我今天说的是让一个div水平居中同时垂直居中，而不是简单的top：50%，left：50%。当然，我们就按一开始的思路写一下：top，left属性都设为50%，看一下效果。 JavaScript Code复制内容到...

    jQuery实现的浮动层div浏览器居中显示效果

    主要介绍了jQuery实现的浮动层div浏览器居中显示效果,涉及jQuery及JS动态操作页面元素与属性相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下

    不固定宽度和高度的情况下CSS调整div居中的方法总结

    很多新手在写css的时候经常遇到的一个问题，当div没有固定的宽度或者高度的时候，如何才能让div水平或者垂直居中显示。如果div有固定宽度的话，用padding，margin都很容易实现。方法有很多种。不过经常遇到这种div...

    jquery.floatdiv 浮动层固定位置

    /*说明：可以让指定的层浮动到网页上的任何位置，当滚动条滚动时它会保持在当前位置不变，不会产生闪动*/ /*调用： 1 无参数调用：默认浮动在右下角 $("#id").floatdiv(); 2 内置固定位置浮动 //右下角 $("#id")....

    精通CSS+DIV网页样式与布局

    　第5章　用CSS设置网页中的背景　 　5.1　背景颜色　 　5.2　背景图片　 　5.3　背景综合一：我的个人主页　 　5.4　背景综合二：古词《念奴娇·赤壁怀古》　 　第6章　用CSS设置表格与表单的样式　 　6.1　控制...

    精通CSS+DIV网页样式与布局Part1

    　第5章　用CSS设置网页中的背景　 　5.1　背景颜色　 　5.2　背景图片　 　5.3　背景综合一：我的个人主页　 　5.4　背景综合二：古词《念奴娇·赤壁怀古》　 　第6章　用CSS设置表格与表单的样式　 　6.1　控制...

    JS弹出居中的DIV的代码

    首先再次详细解释一下JS中窗口和网页的几种尺寸属性的含义 document.body.clientWidth（网页可见区域宽）：是指浏览器显示网页的区域宽度，不包括浏览器的边框宽度和垂直滚动条的宽度。大小随着浏览器的窗口大小而...

    【JavaScript源代码】js实现网页计算器.docx

    　计算机整体框：　/*设置div样式*/　#showdiv{　border: solid 1px;　border-radius: 5px;　width: 350px;　height: 400px;　text-align: center;　margin: auto;/*设置居中*/　margin-top: 50x;　background-color...

Magicbox
Global site tag (gtag.js) - Google Analytics