div absolute 居中

网页对话框居中与响应式布局实现

最新推荐文章于 2024-11-27 00:43:03 发布

原创最新推荐文章于 2024-11-27 00:43:03 发布 · 596 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#div #absolute #居中

网页专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在网页上实现对话框的垂直和水平居中，并且能够自动适应窗口变化，包括详细代码解析及应用示例。

很多情况下，我们需要在网页上弹出dialog，需要水平垂直居中。而且可以做到自动适应窗口变化

[b]对于页面绝对定位，垂直居中[/b]


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");

[b]对于页面绝对定位，水平居中 [/b]


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");

原文链接地址：[url]http://www.jquery001.com/jquery-plugin-center-object-exactly.html[/url]