JavaScript
Article
By Sam Deering

jQuery Center Web Page (Vertical and Horizontal)

By Sam Deering

jQuery code snippet to jQuery Center Web Page or any element both vertically and horizontally. Could be used with an event function to center a Web Page on screen at all times even when the window is resized.

--ADVERTISEMENT--

jQuery.fn.center = function() {
  this.css("position", "absolute");
  this.css("top", ($(window).height() - this.height()) / 2 + $(window).scrollTop() + "px");
  this.css("left", ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + "px");
  return this;
};
  • by the way… how to link it to certain div wrapper element. you told us by defining Jquery.fn.center

    • jQuery4u

      Hi Tutopod,

      Try this code in Firebug. It centers the jQuery4u logo above to the centre of the page.

      (function($) {

      jQuery.fn.center = function() {
      this.css(“position”, “absolute”);
      this.css(“top”, ($(window).height() – this.height()) / 2 + $(window).scrollTop() + “px”);
      this.css(“left”, ($(window).width() – this.width()) / 2 + $(window).scrollLeft() + “px”);
      return this;
      };

      $(‘#logo-image’).center();

      })(jQuery);

      All you need to do it change the jQuery selector (ie – #logo-image to match the element you are trying to centre.

      Hope this helps.
      Sam

  • jquery4u

    @tutopod

    You may wish to put the css calls into the document ready function instead of jQuery.fn.center. Like so:

    $(document).ready(function(){

    //code here

    });

  • David

    Hello, for this code to work is all I have to do is drop it into the head section in my document? I did that and my web page still doesn’t center.
    Thank you,
    David

  • David

    Help! I need to accomplish this but it doesn’t work!

    • jquery4u

      Hi David,

      Try this code in Firebug. It centers the jQuery4u logo above to the centre of the page.

      (function($) {

      jQuery.fn.center = function() {
      this.css(“position”, “absolute”);
      this.css(“top”, ($(window).height() – this.height()) / 2 + $(window).scrollTop() + “px”);
      this.css(“left”, ($(window).width() – this.width()) / 2 + $(window).scrollLeft() + “px”);
      return this;
      };

      $(‘#logo-image’).center();

      })(jQuery);

      All you need to do it change the jQuery selector (ie – #logo-image to match the element you are trying to centre.

      Hope this helps.
      Sam

  • David

    Hello Sam,

    I’m trying to center my web pages vertically but they are of unknown heights, so will this still work?

    Thank you

    • jquery4u

      Hi David,

      Yes this should still work as the heights are not specified, it calculates them. $(window).height() and this.height() are used. If you run into any difficulty try altering the formula to calculate the height based on a css class attached to a wrapper div or such.

      Thanks
      Sam

Recommended
Sponsors
Get the latest in JavaScript, once a week, for free.