how to center a relative div horizontally using jquery on window resize?

i am initially centering div horizontally using jquery but when the window is resized it looks bad so what i want to do is keep it centered using jquery after the window is resized

is there a way to help?

EDIT

guys i have successfully made other elements centered but i am having another issue now :(

please check this http://hrmanagementbradford.com/gallery/

and resize the window, you will see that the content doesn't get positioned correctly, i am trying to fix this for hours but can't find the solution please help with that

EDIT solved! it was complex and my code is very spec开发者_开发技巧ific so posting it here won't help :) and although i used jquery to center it but if we use the css thing then FutureKode's answer is best suited for me :)

Why are you using jquery to center horizontally when css can do it one line and it will stay in the center when the browser is resized:

div {
margin:0 auto;
width:800px
}

You can make it dead-centered like this:

$('#elementID').css({
  position:'absolute',
  top:'50%',
  left:'50%',
  width:'600px',                 // adjust width
  height:'300px',                // adjust height
  zIndex:1000,
  marginTop:'-150px'             // half of height
  marginLeft:'-300px'            // half of width
});

Note that element will appear at the center but with scrolling it won't move. If you want to make it appear at center, you need to set position to fixed instead. However, this won't work in IE6. So decision is yours :)

You can also create quick simple jQuery plugin:

(function($){
    $.fn.centerIt = function(settings){

        var opts = $.extend({}, $.fn.centerIt.defaults, settings);

        return this.each(function(settings){
          var options = $.extend({}, opts, $(this).data());
          var $this = $(this);

          $this.css({
            position:options.position,
            top:'50%',
            left:'50%',
            width:options.width,                 // adjust width
            height:options.height,               // adjust height
            zIndex:1000,
            marginTop:parseInt((options.height / 2), 10) + 'px'  // half of height
            marginLeft:parseInt((options.width / 2), 10) + 'px'  // half of height
          });

        });
    }

    // plugin defaults - added as a property on our plugin function
    $.fn.centerIt.defaults = {
      width: '600px',
      height: '600px',
      position:'absolute'
    }

})(jQuery);

And later use it like:

$('#elementId').centerIt({width:'400px', height:'200px'});

To center it when window is resized, you would use resize event just in case it does not center like this:

$(window).resize(function(){
  $('#elementId').centerIt({width:'400px', height:'200px'});
});

You can use

margin: 0 auto;

to centre a block element horizontally in CSS.

Like so:

div 
{
   width: 400px;
   margin: 0 auto;
}

do this:

$(window).resize(function(){

   // reposition div again here

})