`

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 刷新页面的方法
评论
发表评论

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

相关推荐

    Jsp中如何让图片在div中居中

    最后，还需提一下，如果图片无法在JSP页面中居中，可能的原因包括但不限于：图片的父元素没有正确设置样式、JSP容器默认的样式影响了布局、外部CSS链接未正确加载或存在冲突、以及浏览器缓存导致页面样式未更新等...

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

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

    在DIV中图片垂直/水平居中(最简单方法).rar

    在网页设计中，将图片在div中垂直和水平居中是一项常见的需求，这涉及到CSS布局技术的运用。本文将深入探讨如何使用最简单的方法来实现这个目标，同时也会涉及JavaScript（JS）的一些特效，尽管在描述中没有明确指出...

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

    在网页开发中，jQuery提供了便捷的方式来创建动态的、可交互的弹出div层窗口。这种技术通常用于显示警告、消息、表单或任何需要用户注意的内容。创建一个弹出div层窗口的关键在于利用jQuery的`show()`、`hide()`、`...

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

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

    DIV水平垂直居中

    在网页设计中，让一个`div`元素在页面上实现水平和垂直居中是一项常见的需求。这个主题，"DIV水平垂直居中"，通常涉及到CSS布局技术和可能的JavaScript辅助方法。在这个场景中，描述提到使用了jQuery来实现，这是一...

    DIV 上下居中 多行 省略号

    在网页设计中，让`&lt;div&gt;`元素内的多行文本实现上下居中并添加省略号功能是一项常见的需求。这通常涉及到CSS布局、文本对齐和溢出隐藏等多个技术点。接下来，我们将深入探讨如何实现这个效果。 首先，我们要解决的是...

    juqery实现div弹出居中

    在网页设计中，让一个div元素在页面上弹出并居中是一项常见的需求，尤其是在创建模态对话框、提示信息或者加载窗口时。jQuery作为一个强大的JavaScript库，提供了丰富的功能来简化这种操作。本文将深入探讨如何使用...

    DIV+CSS 图片垂直居中效果

    在网页设计中，"DIV+CSS 图片垂直居中效果"是一个常见的布局需求，它涉及到CSS的盒模型、定位和Flexbox或Grid等现代布局技术。以下是对这一主题的详细阐述： 1. **基础概念** - **DIV**：HTML中的`&lt;div&gt;`元素是一...

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

    然而，当这些浮动的`div`需要在浏览器窗口大小改变时保持居中对齐，传统的浮动方法（如设置`left`或`right`属性）通常无法实现预期效果。这是因为浮动元素会根据设定的位置固定，不会自动调整以适应窗口变化。 为了...

    CSS+JS 蒙板居中技术，居中技术，使用JS获取div的宽度高度？

    本主题将深入探讨如何利用CSS和JavaScript实现蒙版的居中技术，并讲解如何使用JavaScript获取div的宽度和高度。 首先，让我们了解CSS中的居中技术。在CSS中，有多种方法可以实现元素的水平和垂直居中。以下是一些...

    DIV始终居中的半透明弹出层.rar

    在网页设计中，"DIV始终居中的半透明弹出层"是一个常见的需求，它涉及到CSS布局、定位以及透明度设置等多个技术点。下面将详细解释这些知识点。 首先，`DIV`是HTML中的一个块级元素，常用于创建网页布局结构。在本...

    js 创建div层

    2. **创建消息提示div层**：接着，创建一个用于显示消息的div层，同样通过`document.createElement("div")`创建，设置样式使其居中显示，并设置宽度、高度、边框等属性，最后将其添加到页面中。 ```javascript ...

    分别利用css和js来使div中的图片居中

    这篇博文主要探讨了如何通过CSS（层叠样式表）和JavaScript来实现div内图片的居中显示。以下将详细讲解这两种方法。 首先，我们来了解CSS居中技术。CSS提供了多种方式使元素居中，对于图片在div中居中，我们可以...

    javascript浮动div，可拖拽div,遮罩层(div和iframe实现)

    2. **浮动 Div 的自动居中**：`MoveFloatLayer()` 函数通过计算页面中心点的位置来动态调整 Div 的位置，使 Div 始终保持在屏幕中央。 3. **页面加载完成后执行**：`window.onload=initialFloatDiv;` 确保页面完全...

    DIV始终居中的半透明弹出层

    在网页设计中，"DIV始终居中的半透明弹出层"是一种常见的用户界面元素，用于显示重要的信息或者交互，如提示、警告、登录框等。本文将深入探讨如何实现这样的功能，包括HTML结构、CSS样式以及可能涉及的JavaScript...

    jQuery超炫淡入淡出效果DIV渐变居中弹出框插件

    其次，"DIV渐变居中"是将一个div元素在页面中水平和垂直居中，并且在变换过程中实现颜色渐变。这通常涉及到CSS定位（如absolute或fixed）和margin负值的使用来实现居中，而颜色渐变则可以通过CSS3的transition属性...

    垂直居中显示ie7+

    在网页设计中，"垂直居中显示"是一个常见的需求，特别是在多设备、多屏幕尺寸的环境下，确保元素在页面上无论何时都能保持居中状态，能够提供良好的用户体验。本话题主要探讨如何在IE7及以上的浏览器中实现元素的...

    DIV未知高度的垂直居中代码.rar

    标题中的“DIV未知高度的垂直居中代码”指的是在网页设计中如何使一个具有未知高度的&lt;div&gt;元素在页面上实现垂直居中的技术。在Web开发中，这是一项常见的需求，尤其是在响应式设计中，当内容高度不确定时，仍然希望...

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