DEV Community

loading...
Cover image for CSS: Absolute center element

CSS: Absolute center element

d__raptis profile image Jim Raptis ・2 min read

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‍!

Funny Superman GIF

👎 The Wrong Way

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

.centered {
    position: absolute;                                 
    left: 50%;
    top: 50%;
}
Enter fullscreen mode Exit fullscreen mode

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

WTF!!!

No! God damn No! Dat thing is no way centered!

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%);
}
Enter fullscreen mode Exit fullscreen mode

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!!! 👏

Just Do It!!!

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 👇

Discussion (14)

pic
Editor guide
Collapse
melmacaluso profile image
Mel Macaluso

How's that better than the following? Just being curious as I always opt for the following if for some very specific reason flexbox is not the option 😂:

  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
Enter fullscreen mode Exit fullscreen mode
Collapse
d__raptis profile image
Jim Raptis Author

One more CSS instruction I guess 🤣It seems clear and straightforward though, I liked it 💪

Collapse
thehumble_angy profile image
Ange Kouakou

That's clever 🤩

Collapse
d__raptis profile image
Jim Raptis Author

Thanks man 👏

Collapse
link2twenty profile image
Andrew Bone

My most up voted stack overflow answer was about this 😁

top:0 (default)

By default, your element is at the top of the page, and the top of the element is at 0:

--------Top of Page--------
{element}


------Middle of  Page------



------Bottom of  Page------

top:50%

When you move it down by 50% height (50% of the entire page), the top of the…

Collapse
d__raptis profile image
Jim Raptis Author

Nice detailed answer. It's a tricky topic 💪

Collapse
trevdev profile image
Trev

The "wat" image just about killed me. Seriously nice tip, has come in handy for me often!

Collapse
d__raptis profile image
Jim Raptis Author

hahaha glad you liked Trev 😊

Collapse
nuong profile image
nuong.nguyen

Nice, thank for sharing

Collapse
d__raptis profile image
Jim Raptis Author

Really happy you liked it 😊

Collapse
taufik_nurrohman profile image
Taufik Nurrohman

Resize the window until reached half of the screen, you will see an unwanted scrollbars.

Collapse
jwp profile image
John Peters

Doesn't grid do this automatically with justify-items:center?

Collapse
d__raptis profile image
Jim Raptis Author

Sure! Grid or flexbox are my main ways to go too.

However, this little hack comes in handy when I need to position an element relative to its parent.
i.e. an "X" icon at the top right corner of an image.

Collapse
nwajeigideon profile image
Nwajei Gideon

Sometimes i make use of

Margin: 0 auto;

Or

I could just place the element i want centered in a center tag

<\center>