How to Center Absolute Positioned Element in HTML and CSS

When you position an HTML element to absolute and it’s not even in an element which is relatively position, your element will depends on the size of the screen. In this case, it’s hard to position it to the center.

There are solutions to fixed this. You can center a div first and position your element inside that div before you set it to absolute.

Solution 1: Put it inside a div with relative position

You can create a relative positioned element and apply left position to center the element.

Solution 2: Center Absolute Positioned Element

There are some cases that you need to center an HTML element which is not under a div. In this case you can use the code below:

Keep in mind that you need to declare it’s width and the left position (50%). The left margin is half of the width of the HTML element. You can use center a div, image, and other HTML elements.

Note: I used inline styling, so you can see the CSS codes easily. This method is not a good practice. Make sure that you have an external CSS files when working on this.