jquery - center an element

Posted on 2011-09-22
Medium Priority
Last Modified: 2012-06-27
Is there a slick way to have jquery center the selected element?

            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;

seems not to work
Question by:Tom Knowlton
LVL 40

Accepted Solution

Gurvinder Pal Singh earned 1000 total points
ID: 36584834
assuming that 'this' object handle you already have for the element to be centered. And it needs to be centered inside the window, not necessarily its parent

function centerThis(obj)
 var winHeight = $(window).height();
 var winWidth = $(window).width();
 obj.css("position", "absolute");
 obj.css("top", ( winHeight - this.height( ) ) / 2  + "px" ) ;
 obj.css("left", ( winWidth - this.width( ) ) / 2  + "px" );
LVL 17

Assisted Solution

by:Kiran Sonawane
Kiran Sonawane earned 1000 total points
ID: 36585232
Check this

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
        center: function () { alert("DD");
            return this.each(function() {
                var top = ($(window).height() - $(this).outerHeight()) / 2;
                var left = ($(window).width() - $(this).outerWidth()) / 2;
                $(this).css({position:'absolute', margin:0, top: (top > 0 ? top : 0)+'px', left: (left > 0 ? left : 0)+'px'});

  <title>Kiran Test</title>
   <span id="lblCatNameID"><h1>Centre Element<h1></span>   


Open in new window


Author Closing Comment

by:Tom Knowlton
ID: 36588082

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

627 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question