How to center a div with absolute value for “position” horizontally

Although this is not something you come across daily with all those modern browsers and scripts, it’s still possible to have to use this kind of coding when you are working with older scripts, like LFM. This will be achievable using simple CSS to address the issue. So without any waste of time, let’s center a <div> horizontally on a div that has a position value of absolute:

There are two ways to center a <div> with absolute positioning horizontally. Please note that these won’t require you to have parents for the div in question which is a great thing:

Method 1: Using ‘left’ to center a <div>

.centered-div {
    position: absolute; /* or fixed */
    left: 50%; /* Move to the center of the parent */
    transform: translateX(-50%); /* Adjust back by half of its width */
}

In this method, we use the ‘left’ property to position the element and then transform it to adjust its position back by half of its width.

Method 2: Using ‘margin’ to center a <div>

.centered-div {
    position: absolute; /* or fixed */
    width: 300px; /* Set a specific width */
    left: 50%; /* Move to the center of the parent */
    margin-left: -150px; /* Negative margin equal to half the width */
}

In this example which uses margin instead of the ‘left’ property, we use a simple margin-left property with a negative value of half the width of the content width to achieve a centered div.

These two methods will definitely work on all browsers and you won’t have a problem with them. Please share your thoughts and tell me if you have ever used any of these methods to center a <div> horizontally when it was positioned with an absolute value. You can read more web development blog posts here.