Question

用Google搜索并找到一个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注意到的那样，它与给出的示例代码相同，但它只在窗口调整大小时居中..谢谢

Answer 1

在您的示例中，您将获取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/

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/

JQuery自动中心在窗口调整大小

3 个答案: