我怎么能解决同样的错误与jQuery脚本中心的DIV百分比

Question

这是我的代码

<style>
.className{
width:55%;
height:auto;
margin:0 auto;
}
body{
text-align:center;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(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();
});
</script>

当我打开我的页面时，我看到我的DIV不集中，但是当我减少并重新打开浏览器的窗口时，DIV是完全集中的，请帮助我，我要疯了我试着改变

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

与此(致Elhussein Hashem)

<script>
$(document).ready(function(){
     resizeFunction();
    window.onresize = function() {
        resizeFunction();
    };
     resizeFunction();
});
function resizeFunction(){
    $('.className').css({
        position:'absolute',
        left: ($(document).width() - $('.className').outerWidth())/2,
        top: ($(document).height() - $('.className').outerHeight())/2
    });
}
</script>

但结果并没有改变:(

我注意到，即使当我刷新页面时，当我缩小并重新打开浏览器窗口时，所有内容都回到中心

这是DIV

<div class="className">
<div><img style="width:100%" src="http://i39.tinypic.com/5f506d.jpg"/></div>
</div>

p L Z他说。M E

Answer 1

如果我们能看到页面就容易多了，但是你可以尝试使用window.load。我猜，因为你的类有一个图像，准备被调用之前。classname有一个宽度(它知道它有一个图像，但不知道图像的大小)。

<script>
//window.load waits for graphics to finish loading before running
$(window).load(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();
});
</script>