Center a div with position absolute

Many times in CSS we complicate our lives with simple things. In this case we will see how to center a div positioned absolutely and the answer is very simple:

1. We give a fixed width to the div Example: 500px
2. We absolutely position the div with 50% on the left Example: position:absolute;left:50%;
3. We subtract half of what it measures with the left margin Example: margin-left:-250px;

The result is an absolutely positioned and perfectly centered div.

Commentary

Comments