Revision history [back]

To center an element with absolute positioning, follow these steps:

1. Set the left and top properties to 50% to move the element to the center of its parent container.

2. Set the transform property to translate the element back by half of its own width and height, centering it in the container.

Here's an example CSS code:

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

This will center the .element element both horizontally and vertically in its parent container.