Home »
jQuery »
jQuery Examples
How to Center a <div> on the Screen Using jQuery?
Let's have a look how to centre any element, say <div> (here), on the screen using jQuery?
Submitted by Pratishtha Saxena, on September 06, 2022
prerequisite: Adding jQuery to Your Web Pages
To center an element, CSS can be used. This thing can be achieved very easily just by using CSS and positioning the target element accordingly on the page. But it is a bit complicated when done using jQuery. There is not any direct method or event through which we can center an element.
We need to perform some basic logical calculations to get the element at the center. First of all, we'll get the size of the window on which we are working. This can be returned by using $(window).width() and $(window).height(). Now, since we are going to follow a very basic method for this, we need to subtract the width of the window and the width of the div element, and further divide it by 2. This will help us to get the position where the element should be placed to display it in the center. A similar calculation has to be performed with the height of the window and the element.
Once, the height and the width positions have been calculated, then using CSS property in jQuery, we will set the div element according to the calculated distances.
Now, one important factor has to be kept in mind that the above method will help to center a div but it will not be responsive. It means that when the window size is changed, the element will not change accordingly.
Hence, to eliminate this, we'll use an event 'resize' and an event handler for that which will make the whole thing responsive when the window size is changed.
Example to Center a <div> on the Screen Using jQuery
<!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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>Document</title>
<style>
.box{
width: 400px;
height: 400px;
border: 15px solid green;
/* padding: 50px;
margin: 20px; */
}
</style>
</head>
<body>
<h2>Using jQuery To Center a DIV on Screen </h2>
<div class="box"></div>
</body>
<script type="text/javascript">
$(document).ready(function(){
var windowwidth = $(window).width();
var windowheight = $(window).height();
var subtractwidth = (windowwidth-$('.box').outerWidth())/2;
var subtractheight = (windowheight-$('.box').outerHeight())/2;
$('.box').css({'position':'absolute', 'left':subtractwidth+'px', 'top':subtractheight+'px'})
$(window).on('resize',function(){
var windowwidth = $(window).width();
var windowheight = $(window).height();
var subtractwidth = (windowwidth-$('.box').outerWidth())/2;
var subtractheight = (windowheight-$('.box').outerHeight())/2;
$('.box').css({'position':'absolute', 'left':subtractwidth+'px', 'top':subtractheight+'px'})
})
});
</script>
</html>
Output:
