如何在窗口调整大小时使用 jquery 将相对 div 水平居中？答案

【问题标题】：how to center a relative div horizontally using jquery on window resize?如何在窗口调整大小时使用 jquery 将相对 div 水平居中？
【发布时间】：2011-08-06 10:28:07
【问题描述】：

我最初使用 jquery 将 div 水平居中，但是当调整窗口大小时它看起来很糟糕，所以我想要做的是在调整窗口大小后使用 jquery 使其居中

有什么方法可以帮忙吗？

编辑

伙计们，我已经成功地使其他元素居中，但我现在遇到了另一个问题:(

请检查这个 http://hrmanagementbradford.com/gallery/

并调整窗口大小，您会看到内容没有正确定位，我尝试修复此问题数小时但找不到解决方案，请帮助解决此问题

编辑解决了！它很复杂，我的代码非常具体，所以在这里发布它无济于事:) 和虽然我使用 jquery 来居中，但如果我们使用 css 的东西，那么 FutureKode 的答案最适合我:)

【问题讨论】：

为什么不用 CSS (width:XXXpx; margin:auto;) 将 DIV 居中？
你能发布你的代码吗？我不确定你为什么在 jQuery 而不是 CSS 中这样做......
你可以在我发布的链接中看到代码

标签： javascript jquery

【解决方案1】：

为什么在css可以做到一行的情况下使用jquery水平居中，而当浏览器调整大小时它会保持居中：

div {
margin:0 auto;
width:800px
}

【讨论】：

设置position: fixed 或至少设置absolute 可能是明智的。无论如何，Thsi 都会将其保持在中心位置。

【解决方案2】：

您可以像这样使其居中：

$('#elementID').css({
  position:'absolute',
  top:'50%',
  left:'50%',
  width:'600px',                 // adjust width
  height:'300px',                // adjust height
  zIndex:1000,
  marginTop:'-150px'             // half of height
  marginLeft:'-300px'            // half of width
});

请注意，元素将出现在中心，但滚动它不会移动。如果要让它出现在中心，则需要将position 设置为fixed。但是，这在 IE6 中不起作用。所以决定权在你:)

您还可以创建快速简单的 jQuery 插件：

(function($){
    $.fn.centerIt = function(settings){

        var opts = $.extend({}, $.fn.centerIt.defaults, settings);

        return this.each(function(settings){
          var options = $.extend({}, opts, $(this).data());
          var $this = $(this);

          $this.css({
            position:options.position,
            top:'50%',
            left:'50%',
            width:options.width,                 // adjust width
            height:options.height,               // adjust height
            zIndex:1000,
            marginTop:parseInt((options.height / 2), 10) + 'px'  // half of height
            marginLeft:parseInt((options.width / 2), 10) + 'px'  // half of height
          });

        });
    }

    // plugin defaults - added as a property on our plugin function
    $.fn.centerIt.defaults = {
      width: '600px',
      height: '600px',
      position:'absolute'
    }

})(jQuery);

然后像这样使用它：

$('#elementId').centerIt({width:'400px', height:'200px'});

要在调整窗口大小时使其居中，您可以使用resize 事件以防它无法像这样居中：

$(window).resize(function(){
  $('#elementId').centerIt({width:'400px', height:'200px'});
});

【讨论】：

你不认为在一个 CSS 文件中设置所有这些 CSS 会比使用 jQuery 设置更好吗？
@Robert: 是的，但是使用 jquery，您有机会使用 resize 事件将其居中以防万一。
虽然这不能回答我的问题，但仍然值得一票！

【解决方案3】：

你可以使用

margin: 0 auto;

在 CSS 中水平居中一个块元素。

像这样：

div 
{
   width: 400px;
   margin: 0 auto;
}

【讨论】：

@Robert Koritnik：实际上控制居中的属性是margin。不过，为了清楚起见，已更新。
确实如此。但是它没有提到元素的尺寸，所以我认为指出这一点可能很有用。好消息是你更新了你的答案。 +1
@Robert Koritnik：我一直在假设 OP 已经有了 div 的宽度，因为他们已经使用 jQuery 将其居中。但是，如果没有代码示例，总是很难分辨！ :)

【解决方案4】：

这样做：

$(window).resize(function(){

   // reposition div again here

})

【讨论】：