jQuery创建水平和垂直居中的div窗口

最新推荐文章于 2025-08-23 02:53:08 发布

转载最新推荐文章于 2025-08-23 02:53:08 发布 · 364 阅读

文章标签：

#jquery #javascript #function #div

转载同时被 2 个专栏收录

5 篇文章

订阅专栏

技术

2 篇文章

订阅专栏

本文介绍了一种使用JavaScript来动态调整元素位置的方法，确保其始终位于浏览器窗口的正中央。这种方法无需预先知道元素的具体尺寸，但依赖于JavaScript来实现。适合于需要保持元素居中的响应式设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$(window).resize(function(){
$('.className').css({
position:'absolute',
left: ($(window).width() - $('.className').outerWidth())/2,
top: ($(window).height() - $('.className').outerHeight())/2 + $(document).scrollTop()
});
});
//初始化函数

$(window).resize();

这种方法的好处是您无需知道div有多大，缺点是它只能通过JavaScript实现。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

zhangman_oracle

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

jquery创建水平居中垂直居中弹出框

marie0119

02-13

495

*{ margin: 0; padding: 0; } #login{ width: 300px; height: 300px; border: 1px solid red; position: absolute; } #close{ position: absolute; right: 5px; top: 5px; } $(function(){ $(

JQuery实现div自动垂直居中

CCblibo的博客

10-14

837

想要达到的目的：让div元素随着网页的任意改变都是居中的先放上代码： <!DOCTYPE html> <html> <head> <title>垂直居中</title> <script type="text/javascript" src="jquery.js"></script> <script&g...

参与评论您还未登录，请先登录后发表或查看评论

jQuery未知高度div垂直居中（响应式）

arsaycode

11-03

502

废话不说，直接上代码<script src="http://code.jquery.com/jquery-latest.js"></script> <style> #outer{ width:100%; height:50%; margin: 50px auto; border:1px solid #CCC; position:relat...

基于jQuery实现的水平和垂直居中的div窗口

weixin_30820077的博客

01-06

103

在建立网页布局的时候，我们经常会面临一个问题，就是让一个div实现水平和垂直居中，虽然好几种方式实现，但是今天介绍时我最喜欢的方法，通过css和jQuery实现。 1、通过css实现水平居中：复制代码代码如下: .className{ margin:0 auto; width:200px; height:200px; } 2、通过css实现水平居中和垂直居中 通过...

经典面试题：如何让DIV水平和垂直居中

Zhangxi

06-24

2918

CSS让DIV水平居中说明，本文中所指的DIV包括HTML页面中所有的元素。让一个DIV水平居中，直接用CSS就可以做到。只要设置了DIV的宽度，然后使用margin设置边距0 auto，CSS自动算出左右边距，使得DIV居中。 .mydiv{ margin:0 auto; width:300px; height:200px; }

让DIV中的内容水平和垂直居中

weixin_30437337的博客

11-14

113

让一个层水平垂直居中是一个非常常见的布局方式，但在html中水平居中使用margin:0px auto;可以实现，但垂直居中使用外边距是无法达到效果的。（页面设置height:100%;是无效的），这里使用绝对定位+负外边距的方式来实现垂直居中，但同时要考虑页面重置大小的情况，需要使用js来修正。让一个DIV水平居中，直接用CSS就可以做到。只要设置了DIV的宽度，然后使用margi...

让div在body中水平和垂直居中

热门推荐

纯净冰糖的专栏

08-03

1万+

我们在设计页面的时候，经常要把DIV居中显示，而且是相对页面窗口水平和垂直方向居中显示，如让登录窗口居中显示。我们传统解决的办法是用纯CSS来让DIV居中。在本文中，我将给大家讲述如何用CSS和jQuery两种方法让DIV水平和垂直居中。 CSS让DIV水平居中说明，本文中所指的DIV包括HTML页面中所有的元素。让一个DIV水平居中，直接用CSS就可以做到。只要设置了DIV

DIV块，窗口水平居中，窗口水平垂直居中

zhaolisha9232的博客

03-25

789

在设计页面的时候，经常要把DIV居中显示，而且是相对页面窗口水平和垂直方向居中显示，如让登录窗口居中显示。我们传统解决的办法是用纯CSS来让DIV居中。在本文中，我将给大家讲述如何用CSS和jQuery两种方法让DIV水平和垂直居中。 1.CSS让DIV水平居中说明，本文中所指的DIV包括HTML页面中所有的元素。让一个DIV水平居中，直接用CSS就可以做到。只要设置了DIV的宽度，

如何让DIV水平和垂直居中三种方法

summer7310的专栏

09-27

9159

方法1 CSS实现水平和垂直居中要让DIV水平和垂直居中，必需知道该DIV得宽度和高度，然后设置位置为绝对位置，距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，最后将该DIV分别左移和上移，左移和上移的大小就是该DIV宽度和高度的一半。 .mydiv{ width:300px; height:200px; position:ab

jquery计算出left和top,让一个div水平垂直居中的简单实例

10-21

本篇将详细讲解如何使用jQuery实现一个div元素的水平垂直居中效果，通过计算left和top属性来达到目的。首先，我们需要了解几个基本概念： 1. `div`：在HTML中，`<div>`元素是一个通用容器，用于组织其他元素，可以...

jQuery弹出层始终垂直居中相对于屏幕或当前窗口

10-27

本文将详细介绍如何使用jQuery实现弹出层始终垂直居中，包括相对于屏幕和当前窗口两种情况。首先，对于固定高度和宽度的弹出层，我们可以直接通过CSS样式实现居中，例如使用`margin: auto`和`position: absolute`...

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

09-24

这里设置了Div的`position`为`absolute`，然后将其`left`和`top`属性设置为50%，再通过负外边距（即`margin-top`和`margin-left`）调整到垂直和水平居中的位置。负外边距的值等于Div宽高的一半。然而，当窗口大小...

css的white-space: pre

qq_51035159的博客

08-22

226

简单来说，这个组件的核心就是让用户能够粘贴任何文本内容（特别是配置文件、JSON等），并且保证粘贴的内容格式完全不变，然后可以原样发送给后端处理。- white-space: pre ：这是最关键的CSS属性，确保所有空格、制表符、换行符都被保留。- 用户粘贴的内容会完整存储在 inputJson.value 中，包括所有格式字符。- 使用Vue3的 v-model="inputJson" 实现双向数据绑定。- wrap="off" ：防止浏览器自动换行，保持原始的行结构。- 聚焦时的视觉反馈。

react样式问题

qq_44136028的博客

08-22

236

React组件样式控制主要有三种方式：1）内联样式，通过style属性传递JavaScript对象，支持动态样式但需驼峰命名；2）CSS类名，使用className绑定静态样式；3）CSS-in-JS（如styled-components），将CSS嵌入JS生成带样式组件，支持动态主题切换。三种方式各具特点，内联样式适合简单动态样式，CSS类名适合静态样式，CSS-in-JS适合复杂组件化样式需求。

Figma MCP 的作用与使用方法

最新发布

pumpkin84514的博客

08-23

485

（如 Cursor、Claude Code 等）无缝集成的技术，旨在将 Figma 设计稿高效转换为代码，提升设计与开发的协作效率。的结合，显著提升了设计到代码的转换效率。开发者只需完成环境配置与链接粘贴，即可实现设计稿的自动化代码生成，减少手动工作量并降低出错率。Figma MCP（Model Context Protocol）是一种通过。，用于与 Figma 和 AI 工具通信。Figma MCP 需要本地运行一个。Figma MCP 通过。

JavaScript基础语法five

2301_79744908的博客

08-21

347

本文介绍了JavaScript中对象的基本概念和使用方法。对象是一种无序的数据集合，由属性和方法组成，可以通过点语法或方括号访问属性。文章详细讲解了对象的增删改查操作、方法的定义与调用，以及使用for-in遍历对象的技巧。同时介绍了Math内置对象及其常用方法（如ceil、floor、round等），包括随机数生成公式和猜数字案例的实现。最后指出null属于object类型，并提供了生成N-M范围随机数的通用公式。

三十四、Vue3项目大屏之SCSS自适应适配屏幕方法

张先森的博客

08-19

396

其中 px2vw代表的是高度的适配，px2vh代表的是宽度的适配，我当时着急写反了，但是也可以用，px2vw(1) 大概有1px的大小，如果你先写好了px的标准的1920*1080的设计图，可以直接全局转换。哈喽，大家好，在上次第十五章给大家分享了大屏看板Less适配各种屏幕之后，发现大多数的css都是SCSS,那么今天给大家分享下SCSS的自适应屏幕的方法。底下是原先第十五张的less的适配方法。话不多说，直接上代码。

从入门到精通：Java设计模式——单例模式

m0_73590302的博客

08-21

827

本文先解析单例模式 “确保类仅一个实例、提供全局访问点” 的定义，及唯一性、自我实例化、全局访问三大特点，说明其节省资源、保数据一致性的作用。接着详解饿汉式、懒汉式（含线程安全与不安全）、双重检查锁、静态内部类、枚举 6 种实现方式，分析各方式代码、原理、优缺点，尤其聚焦懒汉式多线程安全问题与双重检查锁中 volatile 的作用。还介绍单例在日志记录器、配置管理器等场景的应用，对比优缺点，关联 Spring 框架中 Bean 的单例管理，最后总结要点并给出设计模式学习建议。

实现CSS与jQuery的div垂直水平居中技巧

/* 垂直居中 */ } ``` Flexbox布局提供了`justify-content`和`align-items`属性，可以很容易地实现子元素的垂直和水平居中。 #### 2. jQuery实现div垂直水平居中使用jQuery实现div垂直水平居中，则是通过添加...