jquery - JQuery在窗口调整大小时自动居中

Question

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

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

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

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

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

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

Answer 1

在您的示例中，您正在获取块级元素的宽度- 根据定义，它占据了其父元素的整个宽度。因此，该项目已经居中，但您的文本在其中左对齐。您需要将您的元素声明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/

Answer 2

将 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 3

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

.className{
position:absolute; 
}

到你的 css 文件。

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