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 =
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 =
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 >
|
Output:
Using jQuery to center a DIV on the screen
Share your thoughts in the comments
Please Login to comment...