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

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

如何使用jQuery在屏幕中央设置<div> ？

#1楼

我在扩展@TonyL给出的好答案。我要添加Math.abs（）来包装值，并且还要考虑到jQuery可能处于“无冲突”模式，例如WordPress。

我建议您使用Math.abs（）包装顶部和左侧的值，如下所示。如果窗口太小，并且模式对话框的顶部有一个关闭框，则可以防止看不到关闭框的问题。 Tony的函数可能具有负值。关于如何以负值结束的一个很好的例子是，如果您有一个大的居中对话框，但最终用户已安装了多个工具栏和/或增加了其默认字体-在这种情况下，将出现在模式对话框中的关闭框（如果在顶部）可能不可见且不可点击。

我要做的另一件事是通过缓存$（window）对象来加快速度，以便减少多余的DOM遍历，并使用集群CSS。

jQuery.fn.center = function ($) {
  var w = $(window);
  this.css({
    'position':'absolute',
    'top':Math.abs(((w.height() - this.outerHeight()) / 2) + w.scrollTop()),
    'left':Math.abs(((w.width() - this.outerWidth()) / 2) + w.scrollLeft())
  });
  return this;
}

要使用，您将执行以下操作：

jQuery(document).ready(function($){
  $('#myelem').center();
});

#2楼

这是我的版本。在查看这些示例后，我可能会更改它。

$.fn.pixels = function(property){
    return parseInt(this.css(property));
};

$.fn.center = function(){
    var w = $($w);
    return this.each(function(){
        $(this).css("position","absolute");
        $(this).css("top",((w.height() - $(this).height()) / 2) - (($(this).pixels('padding-top') + $(this).pixels('padding-bottom')) / 2) + w.scrollTop() + "px");
        $(this).css("left",((w.width() - $(this).width()) / 2) - (($(this).pixels('padding-left') + $(this).pixels('padding-right')) / 2) + w.scrollLeft() + "px");
    });
};

#3楼

要将元素相对于浏览器视口（窗口）居中，请不要使用position: absolute ，应fixed正确的位置值（绝对的意思是：“该元素相对于其第一个定位（非静态）祖先元素定位”）。

建议的中心插件的此替代版本使用“％”代替“ 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-ratio)来自：

窗宽： W = 100%

元素宽度（以％为单位）： w = 100 * elementWidthInPixels/windowWidthInPixels

他们计算左居中位置：

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

#4楼

您可以单独使用CSS进行居中，如下所示：

工作实例

.center{ position: absolute; height: 50px; width: 50px; background:red; top:calc(50% - 50px/2); /* height divided by 2*/ left:calc(50% - 50px/2); /* width divided by 2*/ }

<div class="center"></div>

calc()允许您在CSS中进行基本计算。

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

#5楼

我在这里使用的是一种“居中”方法，该方法可确保您尝试居中的元素不仅处于“固定”或“绝对”位置，而且还确保您居中的元素小于其父元素，即居中并且相对于的元素是父元素，如果元素的父元素小于元素本身，则会将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');
        }
    };

来源：oschina

链接：https://my.oschina.net/stackoom/blog/3145602

标签

jquery

div居中

position

div

absolute