使用jQuery在屏幕上居中放置一个DIV

我如何去设置一个<div>在屏幕的中心使用jQuery?

当前回答

我会推荐jQueryUI位置实用工具

$('your-selector').position({
    of: $(window)
});

这给了你更多的可能性，而不仅仅是定心…

2010-12-10 11:08:42

其他回答

你可以像这样单独使用CSS居中:

工作示例

.center { 位置:绝对的; 高度:50 px; 宽度:50 px; 背景:红色; 顶部:calc(50% - 50px/2);/*高度除以2*/ 左:calc(50% - 50px/2);/*宽度除以2*/ ｝ < div class = "中心" > < / div >

Calc()允许您在css中进行基本计算。

用于calc()的MDN文档浏览器支持表

2013-06-28 15:16:54

我更新了托尼的答案这是他的答案的修改版本，我现在虔诚地使用。我想我会分享它，因为它为你可能有的各种情况增加了更多的功能，比如不同类型的位置，或者只想要水平/垂直居中，而不是两者都要。

center.js:

// We add a pos parameter so we can specify which position type we want

// Center it both horizontally and vertically (dead center)
jQuery.fn.center = function (pos) {
    this.css("position", pos);
    this.css("top", ($(window).height() / 2) - (this.outerHeight() / 2));
    this.css("left", ($(window).width() / 2) - (this.outerWidth() / 2));
    return this;
}

// Center it horizontally only
jQuery.fn.centerHor = function (pos) {
    this.css("position", pos);
    this.css("left", ($(window).width() / 2) - (this.outerWidth() / 2));
    return this;
}

// Center it vertically only
jQuery.fn.centerVer = function (pos) {
    this.css("position", pos);
    this.css("top", ($(window).height() / 2) - (this.outerHeight() / 2));
    return this;
}

在我的<head>:

<script src="scripts/center.js"></script>

用法示例:

$("#example1").centerHor("absolute")
$("#example2").centerHor("fixed")

$("#example3").centerVer("absolute")
$("#example4").centerVer("fixed")

$("#example5").center("absolute")
$("#example6").center("fixed")

它适用于任何定位类型，可以轻松地在整个网站中使用，也可以轻松地移植到您创建的任何其他网站。没有更多的恼人的工作区，为中心的东西正确。

希望这是有用的人在那里!享受。

2015-07-23 15:31:33

为了使元素相对于浏览器视窗居中，不要使用position: absolute，正确的位置值应该是固定的(absolute的意思是:“元素的位置相对于它的第一个定位(不是静态的)祖先元素”)。

这个中心插件的替代版本使用“%”而不是“px”，所以当你调整窗口大小时，内容保持居中:

$.fn.center = function () {
    var heightRatio = ($(window).height() != 0) 
            ? this.outerHeight() / $(window).height() : 1;
    var widthRatio = ($(window).width() != 0) 
            ? this.outerWidth() / $(window).width() : 1;

    this.css({
        position: 'fixed',
        margin: 0,
        top: (50*(1-heightRatio)) + "%",
        left: (50*(1-widthRatio))  + "%"
    });

    return this;
}

你需要把margin: 0从宽度/高度中排除内容边距(因为我们使用的是位置固定，有边距没有意义)。根据jQuery文档使用. outerwidth (true)应该包括边缘，但当我在Chrome中尝试时，它没有像预期的那样工作。

50*(1比)来自:

窗口宽度:W = 100%

元素宽度(%):w = 100 * elementWidthInPixels/windowWidthInPixels

它们计算左边居中:

 left = W/2 - w/2 = 50 - 50 * elementWidthInPixels/windowWidthInPixels =
 = 50 * (1-elementWidthInPixels/windowWidthInPixels)

2012-06-06 16:57:17

我喜欢添加函数到jQuery，所以这个函数会有帮助:

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

现在我们可以写成:

$(element).center();

演示:小提琴(添加参数)

2008-10-17 00:22:07

我这里有一个“居中”方法，它确保你试图居中的元素不仅是“固定的”或“绝对的”定位，而且它还确保你正在居中的元素小于它的父元素，这个居中和元素相对于它的父元素，如果元素的父元素小于元素本身，它将从DOM中抓取到下一个父元素，并相对于它居中。

$.fn.center = function () {
        /// <summary>Centers a Fixed or Absolute positioned element relative to its parent</summary>

        var element = $(this),
            elementPos = element.css('position'),
            elementParent = $(element.parent()),
            elementWidth = element.outerWidth(),
            parentWidth = elementParent.width();

        if (parentWidth <= elementWidth) {
            elementParent = $(elementParent.parent());
            parentWidth = elementParent.width();
        }

        if (elementPos === "absolute" || elementPos === "fixed") {
            element.css('right', (parentWidth / 2) - elementWidth / 2 + 'px');
        }
    };

2013-08-14 13:09:19

使用jQuery在屏幕上居中放置一个DIV

推荐文章

最新文章

标签