JQuery window 调整大小时自动居中

Question

Google 搜索并找到一个 jQuery 脚本，用于自动将 div 水平和垂直居中。

添加的内容与示例给出的完全相同，但出于一个原因，div 未按页面加载居中，仅在 window 调整大小时。

示例 link 代码： 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

我做的link上线了（测试）： http://i333180.iris.fhict.nl/test/index.html

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

Answer 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/

Answer 2

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

可以在这里找到很好的解释：

这是代码 - 我只将 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/

Answer 3

作为内联块答案的替代方法，您可以使用 position:absolute 只需添加

.className{
position:absolute; 
}

到您的 css 文件。

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

JQuery window 调整大小时自动居中

JQuery auto center on window resize

jquery

responsive-design

adaptive-design