Open In App
Related Articles

How to center the absolutely positioned element in div using CSS ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

In this article, we will know how to centre the absolutely positioned element using the <div> tag in CSS, & will understand their implementation through the examples. Sometimes we need to place an element into the centre with absolute position, relative to its nearest positioned ancestor in HTML to make it look more presentable. For centering an absolute positioned element in div we use the following examples.

Example 1: This example demonstrates the centering of an absolute positioned element using the <div> tag.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <style>
    #content {
        position: absolute;
        left: 50%;
        transform: translateX(-50%)
    }
    </style>
</head>
 
<body>
    <div id="content">
        <img src=
    </div>
</body>
 
</html>

                    

Output: Here, the left is given 50% to place it in the centre horizontal. Transform is used to pull back the item with half of its width to place it exactly in the centre from the middle of the element. left: 50% is relative to the parent element while the translate transform is relative to the elements width/height.

Example 2: This example demonstrates the centering of the absolutely positioned element in horizontal & vertical directions in the <div> tag.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <style>
    .content {
        height: 400px;
        position: relative;
        border: 4px solid green;
    }
     
    .content img {
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
    </style>
</head>
 
<body>
     
<p>
        Centering an absolute positioned
        element inside a div both horizontally
        and vertically
    </p>
 
    <div class="content">
        <img src=
    </div>
</body>
 
</html>

                    

Output: Here left and the top is given 50% to place it in the centre horizontally and vertically. Transform is used to pull back the item with half of its width to place it exactly in the centre from the middle of the element. Therefore transform: translate is given -50% for both horizontal and vertical to adjust it centrally.



Last Updated : 24 Apr, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads