jquery div 居中技巧应用介绍_jquery

php中文网

发布时间：2016-05-16 17:48:01

1291人浏览过

来源于php中文网

原创

very short version:
[html]

YIXUNCMS中秋专版2.0.4

系统介绍：YIXUNCMS中专专版是易迅软件工作室在中秋节来临之即推出的专题模板建站系统，使用增强版后台管控系统，板板设计符合节日特点。易迅软件工作室恭祝全国人民中秋快乐。特别提示：由于网站页面的不同设计，部分后台功能未在前端进行体现。系统特点：1、采用目前流行的PHP语言编写，底层采用超轻量级框架作为系统支撑；2、页面布局使用DIV+CSS技术，遵循WEB标准，及大提高页面的浏览速度；3、使用应

下载

复制代码代码如下:

 
$('#myDiv').css({top:'50%',left:'50%',margin:'-'+($('#myDiv').height() / 2)+'px 0 0 -'+($('#myDiv').width() / 2)+'px'}); 
$('#myDiv').css({top:'50%',left:'50%',margin:'-'+($('#myDiv').height() / 2)+'px 0 0 -'+($('#myDiv').width() / 2)+'px'}); 

short version:
[html]

复制代码代码如下:

 
(function($){ 
$.fn.extend({ 
center: function () { 
return this.each(function() { 
var top = ($(window).height() - $(this).outerHeight()) / 2; 
var left = ($(window).width() - $(this).outerWidth()) / 2; 
$(this).css({position:'absolute', margin:0, top: (top > 0 ? top : 0)+'px', left: (left > 0 ? left : 0)+'px'}); 
}); 
} 
}); 
})(jQuery); 
(function($){ 
$.fn.extend({ 
center: function () { 
return this.each(function() { 
var top = ($(window).height() - $(this).outerHeight()) / 2; 
var left = ($(window).width() - $(this).outerWidth()) / 2; 
$(this).css({position:'absolute', margin:0, top: (top > 0 ? top : 0)+'px', left: (left > 0 ? left : 0)+'px'}); 
}); 
} 
}); 
})(jQuery); 

Activated by this code :

复制代码代码如下:

$('#mainDiv').center();

[javascript]

复制代码代码如下:

 
(function($){ 
$.fn.extend({ 
center: function (options) { 
var options = $.extend({ // Default values 
inside:window, // element, center into window 
transition: 0, // millisecond, transition time 
minX:0, // pixel, minimum left element value 
minY:0, // pixel, minimum top element value 
withScrolling:true, // booleen, take care of the scrollbar (scrollTop) 
vertical:true, // booleen, center vertical 
horizontal:true // booleen, center horizontal 
}, options); 
return this.each(function() { 
var props = {position:'absolute'}; 
if (options.vertical) { 
var top = ($(options.inside).height() - $(this).outerHeight()) / 2; 
if (options.withScrolling) top += $(options.inside).scrollTop() || 0; 
top = (top > options.minY ? top : options.minY); 
$.extend(props, {top: top+'px'}); 
} 
if (options.horizontal) { 
var left = ($(options.inside).width() - $(this).outerWidth()) / 2; 
if (options.withScrolling) left += $(options.inside).scrollLeft() || 0; 
left = (left > options.minX ? left : options.minX); 
$.extend(props, {left: left+'px'}); 
} 
if (options.transition > 0) $(this).animate(props, options.transition); 
else $(this).css(props); 
return $(this); 
}); 
} 
}); 
})(jQuery); 
[code] 
(function($){ 
$.fn.extend({ 
center: function (options) { 
var options = $.extend({ // Default values 
inside:window, // element, center into window 
transition: 0, // millisecond, transition time 
minX:0, // pixel, minimum left element value 
minY:0, // pixel, minimum top element value 
withScrolling:true, // booleen, take care of the scrollbar (scrollTop) 
vertical:true, // booleen, center vertical 
horizontal:true // booleen, center horizontal 
}, options); 
return this.each(function() { 
var props = {position:'absolute'}; 
if (options.vertical) { 
var top = ($(options.inside).height() - $(this).outerHeight()) / 2; 
if (options.withScrolling) top += $(options.inside).scrollTop() || 0; 
top = (top > options.minY ? top : options.minY); 
$.extend(props, {top: top+'px'}); 
} 
if (options.horizontal) { 
var left = ($(options.inside).width() - $(this).outerWidth()) / 2; 
if (options.withScrolling) left += $(options.inside).scrollLeft() || 0; 
left = (left > options.minX ? left : options.minX); 
$.extend(props, {left: left+'px'}); 
} 
if (options.transition > 0) $(this).animate(props, options.transition); 
else $(this).css(props); 
return $(this); 
}); 
} 
}); 
})(jQuery); 

PLUGIN VERSION
[javascript]

复制代码代码如下:

 
(function($){ 
$.fn.extend({ 
center: function (options) { 
var options = $.extend({ // Default values 
inside:window, // element, center into window 
transition: 0, // millisecond, transition time 
minX:0, // pixel, minimum left element value 
minY:0, // pixel, minimum top element value 
withScrolling:true, // booleen, take care of the scrollbar (scrollTop) 
vertical:true, // booleen, center vertical 
horizontal:true // booleen, center horizontal 
}, options); 
return this.each(function() { 
var props = {position:'absolute'}; 
if (options.vertical) { 
var top = ($(options.inside).height() - $(this).outerHeight()) / 2; 
if (options.withScrolling) top += $(options.inside).scrollTop() || 0; 
top = (top > options.minY ? top : options.minY); 
$.extend(props, {top: top+'px'}); 
} 
if (options.horizontal) { 
var left = ($(options.inside).width() - $(this).outerWidth()) / 2; 
if (options.withScrolling) left += $(options.inside).scrollLeft() || 0; 
left = (left > options.minX ? left : options.minX); 
$.extend(props, {left: left+'px'}); 
} 
if (options.transition > 0) $(this).animate(props, options.transition); 
else $(this).css(props); 
return $(this); 
}); 
} 
}); 
})(jQuery); 

复制代码代码如下:

 
(function($){ 
$.fn.extend({ 
center: function (options) { 
var options = $.extend({ // Default values 
inside:window, // element, center into window 
transition: 0, // millisecond, transition time 
minX:0, // pixel, minimum left element value 
minY:0, // pixel, minimum top element value 
withScrolling:true, // booleen, take care of the scrollbar (scrollTop) 
vertical:true, // booleen, center vertical 
horizontal:true // booleen, center horizontal 
}, options); 
return this.each(function() { 
var props = {position:'absolute'}; 
if (options.vertical) { 
var top = ($(options.inside).height() - $(this).outerHeight()) / 2; 
if (options.withScrolling) top += $(options.inside).scrollTop() || 0; 
top = (top > options.minY ? top : options.minY); 
$.extend(props, {top: top+'px'}); 
} 
if (options.horizontal) { 
var left = ($(options.inside).width() - $(this).outerWidth()) / 2; 
if (options.withScrolling) left += $(options.inside).scrollLeft() || 0; 
left = (left > options.minX ? left : options.minX); 
$.extend(props, {left: left+'px'}); 
} 
if (options.transition > 0) $(this).animate(props, options.transition); 
else $(this).css(props); 
return $(this); 
}); 
} 
}); 
})(jQuery); 

Activated by this code :

复制代码代码如下:

 
$(document).ready(function(){ 
$('#mainDiv').center(); 
$(window).bind('resize', function() { 
$('#mainDiv').center({transition:300}); 
}); 
); 

观此人JS代码，让人叹为观止。
简洁明了。却又举一反三。

jQuery Ajax 请求失败：PHP 文件未执行的排查与解决方案

jQuery Ajax 请求失败：PHP 文件未执行的排查与修复指南

如何使用原生 JavaScript 实现无空格无换行的剪贴板复制

如何使用原生 JavaScript 实现无空格、无换行的多输入框内容一键复制

jQuery Ajax 请求失败：PHP 脚本未执行的排查与修复指南

相关专题

微信文件过期恢复教程

本专题整合了微信文件过期恢复方法、技巧教程，阅读专题下面的文章了解更多详细内容。

2026.02.04

抖音网页版入口与视频观看指南抖音官网视频在线访问

本专题汇总了抖音网页版的入口链接、官方登录页面以及视频观看入口，帮助用户快速访问抖音网页版，提供免登录访问方式和直接进入视频播放页面的方法，确保顺利浏览和观看抖音视频。

2026.02.04

学习通网页版入口与在线学习指南学习通官网登录与使用方法

本专题详细汇总了学习通网页版入口与登录方法，提供学习通官方网页端入口、学生登录平台、网页版使用指南等内容，帮助用户快速稳定地登录学习通官网，顺利进入学习平台，提升学习效率和体验。

2026.02.04

Python Web 框架 Django 深度开发

本专题系统讲解 Python Django 框架的核心功能与进阶开发技巧，包括 Django 项目结构、数据库模型与迁移、视图与模板渲染、表单与认证管理、RESTful API 开发、Django 中间件与缓存优化、部署与性能调优。通过实战案例，帮助学习者掌握使用 Django 快速构建功能全面的 Web 应用与全栈开发能力。

2026.02.04

Java 流式处理与 Apache Kafka 实战

本专题专注讲解 Java 在流式数据处理与消息队列系统中的应用，系统讲解 Apache Kafka 的基础概念、生产者与消费者模型、Kafka Streams 与 KSQL 流式处理框架、实时数据分析与监控，结合实际业务场景，帮助开发者构建高吞吐量、低延迟的实时数据流管道，实现高效的数据流转与处理。

2026.02.04

Golang 容器化与 Docker 实战

本专题深入讲解 Golang 应用的容器化与 Docker 部署，涵盖 Docker 基础概念、容器构建与镜像管理、Go 应用的 Dockerfile 编写、跨平台容器部署与优化、Docker Compose 和 Kubernetes 部署工具。通过实际案例，帮助学习者掌握如何将 Golang 应用容器化并实现高效部署与管理，提升系统的可扩展性与运维效率。

2026.02.04