TLDR:
Learn how to center an element with position: absolute inside its parent.

Introduction

You should probably be thinking, “Why not using the rad CSS flexbox?”. And you’re right! In almost all cases display: flex could work and escape you from some unnecessary headache.

However, sooner or later you’ll need to hack the system and position a poor element using position: absolute. Then, maybe you’ll figure out that it’s a little tricky.

I’m here to rescue you, buddy‍!

👎 The Wrong Way

You open your favorite code editor(VS is mine) and the show starts!

.centered {
    position: absolute;                                 
    left: 50%;
    top: 50%;
}

You’re so much excited about your awesomeness until you look at the final result!

And, that’s the exact time you wonder why you started coding in the first place. But as the curiosity takes place over the frustration, you start wondering: “Why is that happening?”

👍 The Correct Way

You and, obviously, I (when I first came into that centering issue) are missing a crucial detail!

Considering a 2-D plane, the center point (0,0) of the coordinates system is not the center of your element. It’s the top left corner! Now it should be clearer why the item looked far from the center in the first place.

But how can you change that? It’s a cinch and I’m gonna show you the proper way.

The key point is to subtract half of the element’s width on the X-axis (horizontal) and half of the element’s height on the Y-axis (vertical). Then, your element has to be absolutely centered inside its parent.

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

The CSS implementation is even easier, thanks to the translate() function.

The translate() function repositions an element in the horizontal and/or vertical directions.

Thus, by using translate(-50%, -50%) you’ve removed the undesired offset using only 21 characters. Amazing!!! 👏

Conclusion

When the Flexbox module is not an option, you should not be afraid to play with the position property.

To be honest, I’m really curious to learn some even more awkward ways to center my elements. Feel free to show us how in the comment section below 👇