How to Center an Element in jQuery ?

Last Updated : 14 Feb, 2024

Centering elements in a webpage is a common task for web developers, often involving CSS. However, certain scenarios might require dynamically centering elements using JavaScript or jQuery, especially when dealing with dynamic content sizes or responsive designs. jQuery, a fast, small, and feature-rich JavaScript library, simplifies the process of HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. In this article, we will explore how to center an element horizontally, vertically, or both, using jQuery.

Prerequisites

To follow along with these examples, ensure you have jQuery included in your project. You can include jQuery by adding the following script tag in the <head> section of your HTML document:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Table of Content

Centering an Element Horizontally
Centering an Element Vertically
Centering an Element Both Horizontally and Vertically

Centering an Element Horizontally

To center an element horizontally within its parent container, you can set the element's left margin to auto. This method works well when the element's display property is set to block.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>

    <title>Centering an Element Horizontally</title>

    <style>
        .container {
            width: 100%;
            text-align: center;
        }

        #centerElement {
            display: inline-block;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div class="container">
        <div id="centerElement">
            Welcome to GeeksforGeeks
        </div>
    </div>

    <script>
        $(document).ready(function () {
            $('#centerElement').css({
                'display': 'inline-block',
                'margin-left': 'auto',
                'margin-right': 'auto'
            });
        });
    </script>
</body>

</html>

Output

center-element

Centering an Element Vertically

Centering an element vertically requires calculating the top margin based on the parent's height and the element's height. This method can be particularly useful for centering an element within the viewport or a div that has a variable height.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>

    <title>Centering an Element Vertically</title>

    <style>
        .container {
            position: relative;
            height: 100vh;
        }

        #centerElement {
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="container">
        <div id="centerElement">
            Welcome to GeeksforGeeks
        </div>
    </div>

    <script>
        $(document).ready(function () {
            var containerHeight = $('.container').height();
            var elementHeight = $('#centerElement').outerHeight();
            var marginTop = (containerHeight - elementHeight) / 2;
            $('#centerElement').css('top', marginTop + 'px');
        });
    </script>
</body>

</html>

Output

center-element-2

Centering an Element Both Horizontally and Vertically

Combining the methods from the first two examples, you can center an element both horizontally and vertically within its parent.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>

    <title>Centering an Element Vertically</title>

    <style>
        .container {
            position: relative;
            width: 100%;
            height: 100vh;
        }

        #centerElement {
            position: absolute;
            display: inline-block;
        }
    </style>
</head>

<body>
    <div class="container">
        <div id="centerElement">
            Welcome to GeeksforGeeks
        </div>
    </div>

    <script>
        $(document).ready(function () {
            var containerHeight = $('.container').height();
            var containerWidth = $('.container').width();
            var elementHeight = $('#centerElement').outerHeight();
            var elementWidth = $('#centerElement').outerWidth();
            var marginTop = (containerHeight - elementHeight) / 2;
            var marginLeft = (containerWidth - elementWidth) / 2;

            $('#centerElement').css({
                'top': marginTop + 'px',
                'left': marginLeft + 'px'
            });
        });
    </script>
</body>

</html>

Output

center-element-3

How to change the element id using jQuery ?

vkash8574

Improve

Article Tags :

How to Center an Element in jQuery ?

Prerequisites

Centering an Element Horizontally

Centering an Element Vertically

Centering an Element Both Horizontally and Vertically

Similar Reads

Thank You!

What kind of Experience do you want to share?