很多情况下,我们需要在网页上弹出dialog,需要水平垂直居中。而且可以做到自动适应窗口变化
对于页面绝对定位,垂直居中
var h = $(this).height();
var oh = $(this).outerHeight();
var mt = (h + (oh - h)) / 2;
$(this).css("margin-top", "-" + mt + "px");
$(this).css("top", "50%");
$(this).css("position", "absolute");
对于页面绝对定位,水平居中
var w = $(this).width();
var ow = $(this).outerWidth();
var ml = (w + (ow - w)) / 2;
$(this).css("margin-left", "-" + ml + "px");
$(this).css("left", "50%");
$(this).css("position", "absolute");
原文链接地址:
http://www.jquery001.com/jquery-plugin-center-object-exactly.html
分享到:
相关推荐
本篇文章将深入探讨如何利用`DIV+CSS`实现`DIV`的居中布局。 首先,我们要理解`<div>`元素。`<div>`是“division”的缩写,代表一个区域或区块,在HTML中用于组合其他元素,是构建网页布局的基础。通过设置`<div>`...
### DIV垂直居中的N种方法:详尽解析与实践 在网页设计中,DIV元素的垂直居中一直是前端开发者关注的焦点。无论是响应式布局的需求,还是美观度的提升,垂直居中的实现都能显著增强用户体验。本文将深入探讨并演示...
在网页设计中,让元素居中是一个常见的需求,特别是对于`div`这样的块级元素。在本示例中,我们探讨的是如何实现`div`的绝对居中,无论是水平还是垂直方向,即使`div`的高度是不确定的。下面将详细解释这个`DIV绝对...
在CSS网页布局中,使一个DIV元素水平居中是常见的需求,这有助于创建美观且响应式的网站设计。本文将详细探讨几种实现DIV水平居中的方法。 1. **使用`margin: 0 auto`** 这是现代浏览器中最常用的方法。通过设置...
以上就是关于“jQuery弹出div层窗口、div屏幕居中、背景滤镜效果和div拖拽效果”的核心知识点。通过熟练掌握这些技巧,开发者可以创建更富有互动性和用户体验的网页应用。在实际开发中,还需要根据不同的项目需求,...
本知识点将详细讲解如何利用不同的方法使`div`元素在网页上水平和垂直居中。 1. **CSS Flexbox完全居中** Flexbox(弹性盒模型)是现代CSS布局的一种强大工具,适用于单行或单列的容器元素。要使`div`元素在容器中...
### CSS解决未知高度的DIV垂直居中 #### 知识点概述 在Web开发中,实现元素的垂直居中是一项常见的需求。对于已知高度的元素来说,这相对容易实现。但对于那些高度未知或者动态变化的元素,尤其是嵌套在另一个未知...
`属性可以轻松地将文本内容在div内居中对齐。例如: ```css .container { text-align: center; } ``` 2. **多行文本水平居中**: 对于多行文本,`display: flex;`和`justify-content: center;`组合可以实现...
在网页设计中,将图片在div中垂直和水平居中是一项常见的需求,这涉及到CSS布局技术的运用。本文将深入探讨如何使用最简单的方法来实现这个目标,同时也会涉及JavaScript(JS)的一些特效,尽管在描述中没有明确指出...
在网页设计中,让`div`元素居中是一项常见的需求,可以实现各种视觉效果和布局。标题提到的“div居中div居中的8种方法”是网页开发中的基础技巧,适用于不同场景。以下将详细解释这8种方法,并提供相关的应用示例。 ...
在网页设计中,让一个`div`元素在页面上实现水平和垂直居中是一项常见的需求。这个主题,"DIV水平垂直居中",通常涉及到CSS布局技术和可能的JavaScript辅助方法。在这个场景中,描述提到使用了jQuery来实现,这是一...
在网页设计中,"绝对居中div层"是一种常见的布局技术,用于使一个div元素在容器内保持垂直和水平居中的状态。这种技术对于创建响应式设计、弹出框、对话框或者任何需要在页面中心展示的内容至关重要。下面将详细阐述...
在网页设计中,"DIV+CSS 图片垂直居中效果"是一个常见的布局需求,它涉及到CSS的盒模型、定位和Flexbox或Grid等现代布局技术。以下是对这一主题的详细阐述: 1. **基础概念** - **DIV**:HTML中的`<div>`元素是一...
使用position:absolute可以将DIV元素水平垂直居中,方法是将DIV元素的left和top属性设置为50%,然后通过margin-left和margin-top属性将其调整到中心位置。例如: <div style="position:absolute;background-color:...
复制代码代码如下: div { position:absolute; width:500px; height:260px; top:50%; left:50%; margin-left:-250px; height:-130px; z-index:1000; } 文字居中:text-align:center; height:22px;line-height:22px;...
这通常涉及到CSS定位(如absolute或fixed)和margin负值的使用来实现居中,而颜色渐变则可以通过CSS3的transition属性实现。例如: ```css #myDiv { position: fixed; top: 50%; left: 50%; transform: ...
2. 对于需要整体居中的`div`,使用`position: absolute`,并配合`left`、`top`、`margin-left`和`margin-top`来调整元素位置,使其居中。 这种方法适用于知道元素尺寸的情况,如果元素尺寸未知或者需要响应式布局,...
在CSS网页布局中,实现DIV水平居中是一个常见的需求,尤其在软件开发中,良好的页面布局能提供优秀的用户体验。本文将详细介绍几种不同的方法来实现这一目标。 首先,对于单行垂直居中的情况,我们可以利用CSS的`...
设置div的`position`为`absolute`,并使用负的`margin`值,使其相对于其最近的非静态定位祖先元素居中。源码示例如下: ```css .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%...