Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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

  • Last Updated : 03 Nov, 2021

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 centring an absolute positioned element in div we use the following examples.

Example 1: This example demonstrates the centring 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 centring 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.


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!