JavaScript
Article

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.

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;
};

Free Guide:

7 Habits of Successful CTOs

"What makes a great CTO?" Engineering skills? Business savvy? An innate tendency to channel a mythical creature (ahem, unicorn)? All of the above? Discover the top traits of the most successful CTOs in this free guide.

  • http://tutopod.com/ tutopod

    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
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

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