javascript - 使用 jQuery 使 DIV 在屏幕上居中

Question

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

Answer 1

我喜欢向 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();

演示：小提琴（添加参数）

Answer 2

我在这里放了一个jquery插件

非常简短的版本

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

简洁版本

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

由此代码激活：

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

插件版本

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

由此代码激活：

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

是对的吗 ？

更新 ：

来自CSS 技巧

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* Yep! */
  width: 48%;
  height: 59%;
}

Answer 3

我会推荐jQueryUI Position 实用程序

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

这为您提供了比仅居中更多的可能性...

Answer 4

这是我的尝试。我最终将它用于我的 Lightbox 克隆。此解决方案的主要优点是即使调整窗口大小，元素也会自动保持居中，使其非常适合这种用途。

$.fn.center = function() {
    this.css({
        'position': 'fixed',
        'left': '50%',
        'top': '50%'
    });
    this.css({
        'margin-left': -this.outerWidth() / 2 + 'px',
        'margin-top': -this.outerHeight() / 2 + 'px'
    });

    return this;
}

Answer 5

您可以单独使用 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 中进行基本计算。

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

Answer 6

我正在扩展@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();
});

Answer 7

我会使用jQuery UI position函数。

请参阅工作演示。

<div id="test" style="position:absolute;background-color:blue;color:white">
    test div to center in window
</div>

如果我有一个 id 为“test”的 div 居中，那么下面的脚本将在文档准备好的窗口中将 div 居中。（位置选项中“my”和“at”的默认值为“center”）

<script type="text/javascript">
$(function(){
  $("#test").position({
     of: $(window)
  });
};
</script>

Answer 8

我想纠正一个问题。

this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");

上面的代码在以下情况下不起作用this.height（假设用户调整屏幕大小并且内容是动态的）并且scrollTop() = 0，例如：

window.height是600
this.height是650

600 - 650 = -50  

-50 / 2 = -25

现在盒子在-25屏幕外居中。

Answer 9

这是未经测试的，但这样的事情应该可以工作。

var myElement = $('#myElement');
myElement.css({
    position: 'absolute',
    left: '50%',
    'margin-left': 0 - (myElement.width() / 2)
});

Answer 10

如果您希望元素始终位于页面中间，我认为拥有绝对位置并不是最好的选择。你可能想要一个固定的元素。我找到了另一个使用固定定位的 jquery 居中插件。称为定心。

Answer 11

编辑：

如果这个问题教会了我什么，那就是：不要改变已经有效的东西:)

我在http://www.jakpsatweb.cz/css/css-vertical-center-solution.html上提供了一个（几乎）逐字记录的副本- 它在 IE 上被大量黑客攻击，但提供了一种纯 CSS 方式回答问题：

.container {display:table; height:100%; position:absolute; overflow:hidden; width:100%;}
.helper    {#position:absolute; #top:50%;
            display:table-cell; vertical-align:middle;}
.content   {#position:relative; #top:-50%;
            margin:0 auto; width:200px; border:1px solid orange;}

小提琴：http: //jsfiddle.net/S9upd/4/

我已经通过 browsershots 运行了它，看起来还不错；如果没有别的原因，我将保留原件，以便 CSS 规范所规定的边距百分比处理得以实现。

原来的：

看来我迟到了！

上面有一些评论表明这是一个 CSS 问题 - 关注点分离和所有问题。让我先说 CSS确实在这个问题上打了自己的脚。我的意思是，这样做有多容易：

.container {
    position:absolute;
    left: 50%;
    top: 50%;
    overflow:visible;
}
.content {
    position:relative;
    margin:-50% 50% 50% -50%;
}

对？Container 的左上角将位于屏幕的中心，并且带有负边距的内容将神奇地重新出现在页面的绝对中心！http://jsfiddle.net/rJPPc/

错误的！水平定位是可以的，但垂直定位......哦，我明白了。显然在 css 中，当以 % 设置上边距时，该值总是以相对于包含块的宽度的百分比计算。像苹果和橘子！如果您不信任我或 Mozilla doco，请通过调整内容宽度来玩弄上面的小提琴并感到惊讶。

---

现在，CSS 是我的生计，我不会放弃。同时，我更喜欢简单的事情，所以我借用了捷克 CSS 大师的发现并将其变成了一个工作小提琴。长话短说，我们创建了一个表格，其中vertical-align 设置为middle：

<table class="super-centered"><tr><td>
    <div class="content">
        <p>I am centered like a boss!</p>
    </div>
</td></tr></table>

并且内容的位置用良好的旧边距进行了微调：0 auto; ：

.super-centered {position:absolute; width:100%;height:100%;vertical-align:middle;}
.content {margin:0 auto;width:200px;}​

按承诺工作小提琴：http: //jsfiddle.net/teDQ2/

Answer 12

这个函数的转换组件在 Chrome 中对我来说效果很差（没有在其他地方测试过）。我会调整窗口的大小，然后我的元素会慢慢地四处移动，试图赶上。

因此，以下函数注释了该部分。此外，我添加了用于传入可选 x 和 y 布尔值的参数，如果你想垂直居中而不是水平居中，例如：

// Center an element on the screen
(function($){
  $.fn.extend({
    center: function (x,y) {
      // var options =  $.extend({transition:300, minX:0, minY:0}, options);
      return this.each(function() {
                if (x == undefined) {
                    x = true;
                }
                if (y == undefined) {
                    y = true;
                }
                var $this = $(this);
                var $window = $(window);
                $this.css({
                    position: "absolute",
                });
                if (x) {
                    var left = ($window.width() - $this.outerWidth())/2+$window.scrollLeft();
                    $this.css('left',left)
                }
                if (!y == false) {
            var top = ($window.height() - $this.outerHeight())/2+$window.scrollTop();   
                    $this.css('top',top);
                }
        // $(this).animate({
        //   top: (top > options.minY ? top : options.minY)+'px',
        //   left: (left > options.minX ? left : options.minX)+'px'
        // }, options.transition);
        return $(this);
      });
    }
  });
})(jQuery);

Answer 13

这很棒。我添加了一个回调函数

center: function (options, callback) {

if (options.transition > 0) {
   $(this).animate(props, options.transition, callback);
} else { 
    $(this).css(props);
   if (typeof callback == 'function') { // make sure the callback is a function
       callback.call(this); // brings the scope to the callback
   }
}

Answer 14

要将元素相对于浏览器视口（窗口）居中，不要使用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 doc using.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)

Answer 15

我这里有一个“中心”方法，可确保您尝试居中的元素不仅是“固定”或“绝对”定位，而且还确保您居中的元素小于其父元素，这个居中并且相对于的元素是父元素，如果元素的父元素小于元素本身，它将掠夺 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');
        }
    };

Answer 16

CSS 解决方案 仅两行

它水平和垂直集中你的内部 div。

#outer{
  display: flex;
}
#inner{
  margin: auto;
}

仅用于水平对齐，更改

margin: 0 auto;

对于垂直，改变

margin: auto 0;

Answer 17

我用这个：

$(function() {
   $('#divId').css({
    'left' : '50%',
    'top' : '50%',
    'position' : 'absolute',
    'margin-left' : -$('#divId').outerWidth()/2,
    'margin-top' : -$('#divId').outerHeight()/2
  });
});

Answer 18

请使用这个：

$(window).resize(function(){
    $('.className').css({
        position:'absolute',
        left: ($(window).width() - $('.className').outerWidth())/2,
        top: ($(window).height() - $('.className').outerHeight())/2
    });
});

// To initially run the function:
$(window).resize();

Answer 19

您的过渡效果不佳，因为每次滚动文档时您都在调整元素的位置。您想要的是使用固定定位。我尝试了上面列出的固定中心插件，这似乎很好地解决了这个问题。固定定位允许您将元素居中一次，并且 CSS 属性会在您每次滚动时为您维护该位置。

Answer 20

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

$.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");
    });
};

Answer 21

不需要jquery

我用它来居中 Div 元素。CSS样式，

.black_overlay{
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
}

.white_content {
    display: none;
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    padding: 16px;
    border: 16px solid orange;
    background-color: white;
    z-index:1002;
    overflow: auto;
}

开放元素

$(document).ready(function(){
    $(".open").click(function(e){
      $(".black_overlay").fadeIn(200);
    });

});

Answer 22

您可以使用 CSStranslate属性：

position: absolute;
transform: translate(-50%, -50%);

阅读这篇文章了解更多详情。

Answer 23

我对 TONY L'S ANSWER 的更新 这是我现在虔诚地使用的他的答案的修改版本。我想我会分享它，因为它为您可能遇到的各种情况添加了更多功能，例如不同类型的position或只想要水平/垂直居中而不是两者。

中心.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")

它适用于任何定位类型，并且可以轻松地在您的整个站点中使用，并且可以轻松地移植到您创建的任何其他站点。没有更多烦人的解决方法来正确居中。

希望这对那里的人有用！享受。

Answer 24

有很多方法可以做到这一点。我的对象被display:none隐藏在 BODY 标签内，因此定位是相对于 BODY 的。使用$("#object_id").show()后，我调用$("#object_id").center()

我使用position:absolute是因为有可能，特别是在小型移动设备上，模态窗口大于设备窗口，在这种情况下，如果定位是固定的，则某些模态内容可能无法访问。

这是基于其他人的答案和我的具体需求的我的口味：

$.fn.center = function () {
        this.css("position","absolute");

        //use % so that modal window will adjust with browser resizing
        this.css("top","50%");
        this.css("left","50%");

        //use negative margin to center
        this.css("margin-left",(-1*this.outerWidth()/2)+($(window).scrollLeft())+"px");
        this.css("margin-top",(-1*this.outerHeight()/2)+($(window).scrollTop())+"px");

        //catch cases where object would be offscreen
        if(this.offset().top<0)this.css({"top":"5px","margin-top":"0"});
        if(this.offset().left<0)this.css({"left":"5px","margin-left":"0"});

        return this;
    };

Answer 25

通常，我只会用 CSS 来做这件事......但是既然你问过你用 jQuery 做这个的方法......

以下代码将 div 在其容器内水平和垂直居中：

$("#target").addClass("centered-content")
            .wrap("<div class='center-outer-container'></div>")
            .wrap("<div class='center-inner-container'></div>");

body {
    margin : 0;
    background: #ccc;
}

.center-outer-container {
    position : absolute;
    display: table;
    width: 100%;
    height: 100%;
}

.center-inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    text-align: left;
    background: #fff;
    padding : 20px;
    border : 1px solid #000;
}

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<div id="target">Center this!</div>

（另见这个小提琴）

Answer 26

就说： $("#divID").html($('').html($("#divID").html()));

Answer 27

它只能用CSS来完成。但他们用jQuery 或 JavaScript询问

在这里，使用CSS Flex box属性来对齐 div 中心。

body.center{
  display:flex;
  align-items:center; // Vertical alignment
  justify-content:center; // Horizontal alignment
}

对齐项目：中心；- 用于垂直对齐。

证明内容：中心；- 用于水平对齐。

document.querySelector("body").classList.add("center");

body {
  margin : 0;
  height:100vh;
  width:100%;
  background: #ccc;
}
#main{
  background:#00cc00;
  width:100px;
  height:100px;
}
body.center{
  display:flex;
  align-items:center;
  justify-content:center;
}

<body>
  <div id="main"></div>
</body>

Answer 28

为什么不使用 CSS 使 div 居中？

#timer_wrap{  
  position: fixed;
  left: 50%;
  top: 50%;
}