使用 jQuery 水平和垂直居中填充的全角 DIV

发布于 2024-12-06 17:54:06 字数 620 浏览 2 评论 0原文

只要 css 中没有填充或 100% 宽度，下面的代码就能神奇地使我的 div 居中：

jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop() + "px");
    this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");
    return this;
}

$(element).center();

不幸的是，这在最新版本的 Safari、Firefox 和 Chrome 中搞乱了我的 (宽度：100%) div 的填充（可能所有浏览器也是如此）。左侧的内边距消失了，右侧的内边距仍然存在，但它脱离了页面，创建了一个滚动条。有什么建议吗？

现场演示：http://www.pillerdesigns.com/

原文

The following code works wonders to center my div as long as there's no padding or 100% width in the css:

jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop() + "px");
    this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");
    return this;
}

$(element).center();

Unfortunately, this screws up the padding of my (width: 100%) div in the latests versions of Safari, Firefox, and Chrome (probably all browsers too). The padding on the left is gone, and the padding on the right still exists, but it's off the page, creating a scrollbar. Any suggestions?

Live demo: http://www.pillerdesigns.com/

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

聽兲甴掵 2024-12-13 17:54:06

当我想要将某些东西居中时，我通常会这样做：

jQuery.fn.center = function () {

    this.css({
        position: 'absolute',
        top: 50+'%',
        left: 50+'%',
        marginTop: -(this.outerHeight()/2),
        marginLeft: -(this.outerWidth()/2)
    });

    return this;
}

无论如何，你有reset.css吗？因为您的问题是特定于浏览器的。

$(element).center();

编辑：

将 box-sizing: border-box; 添加到您的 #content div css 中。

问题是您在 100% 宽度元素上使用填充。 box-sizing 方法适用于所有浏览器，但不适用于 IE7 及更低版本。

-- 或 --

将您的 #content div 包裹在另一个 div 中，将其设置为 100% 并将填充添加到内部 div。

When I want to center something I normally do this:

jQuery.fn.center = function () {

    this.css({
        position: 'absolute',
        top: 50+'%',
        left: 50+'%',
        marginTop: -(this.outerHeight()/2),
        marginLeft: -(this.outerWidth()/2)
    });

    return this;
}

Anyway, do you have a reset.css? Since your problems are browser specific.