`
menjoy
  • 浏览: 422240 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

利用JS把Div等对象水平、垂直居中

阅读更多

<script type="text/javascript">
<!--
//使用说明:
// 1、拷贝这段代码,引入JQuery库
// 2、设定把要居中的对象三个参数:_ww宽度,_hh高度,_id,对象id
_ww = 300;
_hh = 300;
_id = 'aaa';

$(document).ready(function(){
findDimensions();
window.onresize=findDimensions;
});

function findDimensions() {
var pleft = 0;
var ptop = 0;
var winWidth = 0;
var winHeight = 0;
var _obj = document.getElementById(_id);
//获取窗口宽度
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
//获取窗口高度
if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
//通过深入Document内部对body进行检测,获取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
ptop = (winHeight-_hh)/2;
pleft = (winWidth-_ww)/2;

_obj.style.top=ptop+"px";
_obj.style.left=pleft+"px";
}
//-->
</script>

0
3
分享到:
评论

相关推荐

    DIV水平垂直居中

    总之,实现`div`的水平垂直居中有多种方法,包括CSS的Flexbox、Grid、绝对定位等,以及JavaScript/jQuery的动态调整。选择哪种方法取决于项目需求和浏览器兼容性要求。在实际开发中,通常会结合使用这些技术来达到...

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

    以上就是使用CSS(特别是Flexbox和Grid布局)以及JavaScript实现图片在div中垂直/水平居中的方法。这些技巧不仅适用于图片,还可以应用于其他类型的元素,提高了网页布局的灵活性和可维护性。在实际项目中,应根据...

    DIV+CSS 图片垂直居中效果

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

    div的内容图片垂直居中代码(兼容多浏览器).rar

    在网页设计中,让图片或其他内容在div容器中垂直居中是一个常见的需求,尤其是在多浏览器兼容性方面。这里我们将深入探讨如何实现这个功能,并结合JavaScript(JS)特效和CSS样式来达成目标。首先,让我们先了解一些...

    div不定宽高的水平和垂直居中

    综上所述,针对“div不定宽高的水平和垂直居中”以及兼容IE67的需求,我们可以选择使用CSS传统方法(如绝对定位)或者结合JavaScript来实现。考虑到不同的浏览器兼容性和场景适应性,应根据实际项目需求来选择最合适...

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

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

    垂直居中显示ie7+

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

    DIV以及图片水平垂直居中兼容多种浏览器

    在网页设计中,让元素(如DIV或图片)在页面上水平垂直居中是一项常见的需求。这有助于确保用户无论在何种设备或浏览器上查看页面,都能获得一致的视觉体验。以下将详细介绍两种纯CSS方法以及一种JavaScript辅助的...

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

    1. 设置div元素的display属性为table-cell,并且利用vertical-align属性设置为middle来实现垂直居中。 2. 将图片元素的margin设置为0 auto,以实现水平居中。在不指定具体值的情况下,0 auto会使元素在其包含块中...

    div+css布局限制图片最大宽度图片水平垂直居中兼容IE6

    总结起来,要实现“div+css布局限制图片最大宽度图片水平垂直居中兼容IE6”,我们需要结合使用`max-width`属性限制图片宽度,通过`text-align`和内联块级元素实现水平居中,以及利用`vertical-align`和负`margin`...

    div+css图片垂直居中

    "div+css图片垂直居中"是这个话题的核心,它涉及到CSS布局和浏览器兼容性问题,特别是对于Internet Explorer(IE)和其他现代浏览器的处理差异。下面将详细阐述如何实现这一目标。 1. **基本原理**: CSS中的定位...

    使用bootstrap的H5页面登录框自适应水平居中、垂直居中

    在创建H5页面时,我们常常需要实现登录框等组件在不同屏幕尺寸下的自适应水平居中和垂直居中。在标题和描述中提到的问题,即在使用Bootstrap时,登录框无法自动在视觉中心对齐,这通常是因为Bootstrap的栅格系统和...

    DIV 上下居中 多行 省略号

    总结来说,实现`&lt;div&gt;`内多行文字垂直居中并添加省略号功能,主要涉及CSS的布局、文本对齐和溢出隐藏技术。通过`display: flex`或`display: grid`实现上下居中,结合`line-clamp`、`-webkit-line-clamp`以及`...

    jQuery的div 重直水平居中

    在CSS3中,我们可以利用`display: flex`属性来轻松地实现子元素的水平和垂直居中。创建一个包含居中div的容器,并应用以下样式: ```css .container { display: flex; justify-content: center; /* 水平居中 */ ...

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

    `以实现水平和垂直居中。 3. **Grid布局**: - 父div使用`display: grid;` - 设定`place-items: center;`使得内容在网格中居中。 4. **text-align 和 vertical-align**: - 对于内联元素,如img标签,可以使用`...

    5.(vue3.x+vite)水平垂直居中实现方式.rar

    在前端开发中,布局设计是不可或缺的一部分,尤其是页面元素的水平和垂直居中。本教程主要探讨在Vue 3.x框架结合Vite构建的项目中,如何实现元素的水平垂直居中。Vue 3.x提供了更好的性能和更简洁的API,而Vite则是...

    让Div实现水平或垂直居中的相关方法

    以下CSS代码可以将Div垂直居中: ```css .className { width: 270px; height: 150px; position: absolute; left: 50%; top: 50%; margin-top: -75px; margin-left: -135px; } ``` 这里设置了Div的`position...

    纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示

    下文以span元素为例子,介绍一下如何实现span元素在div中实现水平垂直居中效果,代码如下: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset= utf-8&gt; &lt;meta name=author content=...

    使用绝对定位+负外边距让DIV层水平垂直居中页面

    这里我们将详细探讨如何利用绝对定位和负外边距来实现一个DIV层在页面中的水平垂直居中,并考虑窗口大小变化时的动态调整。 首先,我们要明白CSS的定位机制。在CSS中,定位主要有静态定位、相对定位、绝对定位和...

    JS+CSS设置img在DIV中只显示Img垂直居中的部分

    本问题探讨的是如何使用JavaScript(JS)和层叠样式表(CSS)来实现一个图片(img)在div容器中只显示垂直居中部分的场景。这种布局常见于图片预览、滚动轮播等应用中,它可以让用户看到图片的中心部分,即使图片的...

Global site tag (gtag.js) - Google Analytics