image - How can i resolve same bug with jQuery scripts to center a DIV with percentage? -

this code

<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 });  }); // run function: $(window).resize();  });  </script> 

when open page see div not centred, when reduce , reopen in full mod window of browser, div centred, plz me i'm going crazy try change

this

<script>  $(document).ready(function(){  $(window).resize(function(){  $('.classname').css({ position:'absolute', left: ($(window).width() - $('.classname').outerwidth())/2, top: ($(window).height() - $('.classname').outerheight())/2 });  }); // run function: $(window).resize();  });  </script> 

with (txh 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> 

but result not change :(

i have noticed when refresh page, centered when reduce , reopen browser window

this div

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

p l z h e l p m e

it easier if see page, try using window.load. i'm guessing, class has image, ready getting called before .classname has width (it knows has image, doesn't know size of image).

<script> //window.load waits graphics 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     });   });   // run function:   $(window).resize(); }); </script>