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

Centering an absolutely positioned element in a div using CSS involves adjusting the position both vertically and horizontally. By using a combination of the top, left, and transform properties, we can ensure the element is perfectly centered within its container. This method creates a balanced and visually appealing layout on the page.

Using top, left, and transform Properties

This approach centers an absolutely positioned element by setting top: 50% and left: 50%, which moves the element's top-left corner to the center of the container. To fully center the element itself, we apply transform: translate(-50%, -50%), which shifts the element back by half its width and height for perfect centering.

Syntax

.element { position: absolute; 
top: 50%; 
 left: 50%; 
 transform: translate(-50%, -50%);
}

Example: In this example, the image is centered inside the outer div using top: 50%, left: 50%, and transform: translate(-50%, -50%). The outer div has position: relative, which allows the image to be perfectly centered both horizontally and vertically.

Output: 

Note: This method has some drawbacks. The absolutely positioned element needs to be carefully placed to stay inside the container or browser window and avoid overlapping with other elements.

Also, if the container's size changes, the element might not stay perfectly centered.