How to center a DIV on screen using jQuery ?
In this article, we are going to take a look at how to center a DIV on the screen using jQuery. There are a lot of times when while developing, you might want to center a div on the website, and using jQuery you can easily achieve the purpose.
jQuery is a very popular javascript library that is fast, small, and full of features like HTML DOM traversal and manipulation, animation, event handling, etc.
Approach: To center the div, we use the $(element).css() method of jQuery to manipulate the CSS properties of the div element to center it.
Syntax:
$(element).css(object)
Parameters:
- object: An object of key-value pairs consisting of the CSS property name as key and its corresponding value.
In our case, to center the div, we use the following code:
$(div).css({ position:"absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)" })
Here, we set the CSS position attribute to absolute, css top property, and CSS left to 50% indicating center. But the top left point of the div element is set to the middle that is top 50% and left 50% and hence we shift the element according to its size in negative 50% towards the top and negative 50% towards left using css translate property so as to bring the center of the element to the center of the screen and hence ultimately centering the div.
Example 1: In this example, we have a div element with a class of “center“. We select the element and use the above function on it to center it on the screen.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > Using jQuery to center a DIV on the screen </ title > < script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity = "sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin = "anonymous" referrerpolicy = "no-referrer" > </ script > </ head > < body style="font-family:sans-serif; margin: 0; padding: 0; background-color: lightblue;"> < div class = "center" style = "background-color:springgreen;" > < h1 > w3wiki </ h1 > < h3 > Using jQuery to center a DIV on the screen </ h3 > </ div > < script > $(".center").css({ position: "absolute", left: "50%", top: "50%", transform: "translate(-50%, -50%)" }) </ script > </ body > </ html > |
Output:
Example 2: If you want to center the div, relative to its parent and not the screen, then you can add “position: relative” to its parent and achieve the desired output. The example below shows this:
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > Using jQuery to center a DIV on the screen </ title > < script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity = "sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin = "anonymous" referrerpolicy = "no-referrer" > </ script > </ head > < body style="font-family: sans-serif; margin: 0; padding: 0; background-color: lightblue;"> < div class = "parent" style="border: 2px solid black; width: 600px; height: 300px; margin: 20px;"> < div class = "center" style = "background-color: springgreen;" > < h1 > w3wiki </ h1 > < h3 > Using jQuery to center a DIV on the screen </ h3 > </ div > </ div > < script > $(".parent").css({ position: "relative" }) $(".center").css({ position: "absolute", left: "50%", top: "50%", transform: "translate(-50%, -50%)" }) </ script > </ body > </ html > |
Output:
Contact Us