How to center a DIV on screen using jQuery ?

Last Updated : 16 Mar, 2023

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> 
            GeeksforGeeks 
        </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:

Using jQuery to center a DIV on the screen

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> 
                GeeksforGeeks 
            </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>