JQuery在窗口调整大小时自动居中答案

【问题标题】：JQuery auto center on window resizeJQuery在窗口调整大小时自动居中
【发布时间】：2023-04-10 14:51:01
【问题描述】：

搜索了一下，发现了一个 jQuery 脚本，用于自动将 div 水平和垂直居中。

添加的内容与示例中的完全相同，但原因之一是 div 不以页面加载为中心，仅在调整窗口大小时。

示例链接代码： http://demo.tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/demo.html

示例演示： http://demo.tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/3.html

我做的链接在线（测试）： http://i333180.iris.fhict.nl/test/index.html

您可以通过 source-center.js 注意到，它与给出的示例代码相同，但仅在调整窗口大小时才居中。谢谢

【问题讨论】：

您需要使用 jquery 还是只是在尝试？我建议使用 css
@AbdulAhmad 我可以使用css，但是发现了这段代码，女巫在网上工作而不是和我一起工作，因此询问是否有人知道..
好的，正在检查。那就试试吧！

标签： jquery responsive-design adaptive-design

【解决方案1】：

在一个 div 中自动居中一个 div 很简单，这里有一段代码你可以试试！

.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

演示： https://css-tricks.com/centering-css-complete-guide/

【讨论】：

是的，我知道这个方法，但是上面的代码应该可以在没有设置 de 或高度的情况下工作。我使用了相同的代码，但我的页面无法正常工作，而在线却可以。但我很感谢你的建议！

【解决方案2】：

在您的示例中，您将采用 block-level element 的宽度 - 根据定义，它占据了其父级的全部宽度。因此，该项目已经居中，但您的文本在其中左对齐。您需要将您的div 声明为inline-block 元素，然后水平居中才会起作用。

可以在这里找到一个很好的解释：https://stackoverflow.com/a/9189873/844726

这里是代码 - 我只将style 属性添加到您的div 中（仅作为示例）：

HTML：

<div class="className" style="display: inline-block">
    <p>Centered In The Middle Of The Page With jQuery</p>
</div>

还有 JS：

$(document).ready(function(){

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

});

http://jsfiddle.net/yukg0nv5/

【讨论】：

【解决方案3】：

作为 inline-block 答案的替代方案，您可以使用 position:absolute 只需添加

.className{
position:absolute; 
}

到您的 css 文件。

https://jsfiddle.net/26y9aue4/2/

【讨论】：

这有效地将div 降低为内联元素。该解决方案有效，但无法解释问题。
在提交以后的答案时我会记住这一点。