In this guide, I will explain in detail how to display a box element in the center of a webpage using jQuery’s scrollTop and scrollLeft methods, making it easy for beginners to understand. By following this article, you’ll deepen your basic knowledge of CSS and JavaScript and learn how to apply it to real projects.
Positioning a Box in the Center of the Web Page
In web design, it’s common to place specific elements in the center of the screen. This simple yet effective design technique grabs the user’s attention and improves the overall appearance of the web page. Let’s learn how to achieve this using jQuery.
Preparation
Before starting this tutorial, make sure of the following:
- You have basic knowledge of HTML, CSS, and JavaScript.
- You have access to the jQuery library (recommended to load via CDN).
Step 1: Set Up the HTML Structure
First, create the HTML markup for the box you want to center. In this example, we will use a div element with the ID of “iBox.”
<h1>Display a 150×150 box in the center of the page</h1>
<div align="center">Please refresh the page (F5) if the browser size is changed.</div>
<div id="iBox"></div>
Step 2: Apply Basic Styles with CSS
Next, apply basic styles to the box (#iBox) and the entire page. In this step, we will set a background color to make the box visually stand out and define font styles that apply to the entire page.
<style type="text/css">
<!--
body {
font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
margin:0;
padding:0;
}
h1{
font-size:16px;
font-weight:normal;
line-height:1.2em;
text-align:center;
padding:15px 0 10px 0;
}
#iBox{
width:150px;
height:150px;
background-color:#09F;
position:absolute;
}
-->
</style>
Step 3: Use jQuery to Center the Box
Finally, use jQuery to ensure the box is always positioned in the center of the page. Load the jquery.min.js (1.9.1) file. To achieve this, use the scrollTop and scrollLeft methods to dynamically adjust the box’s position.
Measure the browser height and width, and display the box element (#iBox) in the center of the browser using .scrollTop() and .scrollLeft().
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var strid="#iBox"; // The ID of the box
$(strid).css("top", ($(window).height()-$(strid).height()) / 2+$(window).scrollTop()+"px");
$(strid).css("left", ($(window).width()-$(strid).width()) / 2+$(window).scrollLeft()+"px");
});
</script>
This script runs after the page loads, positioning the box in the center of the screen. If the browser size changes, reloading the page will reposition the box in the center. For a more advanced implementation, you can use the window.onresize event to automatically reposition the box when the browser size changes.
Displaying a Box Element in the Center of the Page Using scrollTop and scrollLeft
You can check the demo page of the implementation from the following link:
Demo: Display a Box Element in the Center of the Page Using scrollTop and scrollLeft
Although this can be done with CSS alone, we decided to use JavaScript for this tutorial.
Conclusion
In this article, we learned how to position a box element in the center of a webpage using jQuery. By combining basic CSS knowledge and dynamic element manipulation with JavaScript, you can create effective web page designs. This technique can be applied to many web design patterns, such as pop-up windows and modal dialogs.
To enhance your web development skills, it’s essential to understand these fundamental techniques and apply them to real projects. Continue enjoying the technical challenges and expanding the possibilities of the web.
*Please use it at your own risk if you replicate the content.
Do not use the Google Analytics tag in the head tag of the demo page.
