DEV Community

loading...

Tip #1 : Centering elements without flexbox and automatic margins

gablaroche profile image Gabriel Laroche Updated on ・1 min read

This series is about all the neat little HTML/CSS/JS tricks I found and keep finding. Most of these are things that initially took me quite a long time to find or figure out and some are just useful tricks that I use in my day to day.

This neat little trick allows you to center elements anyway you want in almost any situation. I found this trick when I was trying to vertically center a relative element in its container. I found out that you can use this trick to also horizontally center elements. Useful when margin: 0 auto; or flexbox doesn't work. Anyway here's the code :

Note only use this method as a last resort, if you can use to automatic margins or flexbox, use those methods instead


I initially found this trick here

The code bit by bit :

Horizontal centering

.container {
  position: relative;
}

.center__horizontal {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
Enter fullscreen mode Exit fullscreen mode

Vertical centering

.container {
  position: relative;
}

.center__vertical {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
Enter fullscreen mode Exit fullscreen mode

Vertical & Horizontal centering

.container {
  position: relative;
}

.center__both {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
Enter fullscreen mode Exit fullscreen mode

Center a relative Element to its container

.container {
  width: 550px;
  height: 150px;
  background: #eaeaea;
}

.center__relative {
  position: relative;
  width: 50px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
Enter fullscreen mode Exit fullscreen mode

Discussion (16)

pic
Editor guide
Collapse
koczkadavid profile image
David Koczka • Edited

I'd stick with flexbox, it's the best choice for now. Using absolute positioning can introduce more bad things, than good.

EDIT:
Here's a neat little game, which can teach you flexbox in no time.
flexboxfroggy.com

Collapse
gablaroche profile image
Gabriel Laroche Author • Edited

Yes I agree, but this is meant for situations where flexbox doesn't work, it's pretty rare but it happens. This method is more of a last resort than "use this intstead of flexbox and automatic margins". I'll add a little note to the post.

EDIT : It's particularly useful for centered absolute pseudo elements.

Collapse
martinkolodzie4 profile image
Martin Kolodziejczyk

Thanks, it really helped me.

Collapse
gablaroche profile image
Gabriel Laroche Author

I'm glad it could be helpful :)

Collapse
okbrown profile image
Orlando Brown

Other than the modal reason, why would margin 0 auto or flexbox not work?

If it is not working would that not hint to your markup and styling being over complicated to begin with?

Tricks/Hacks are fun and but it usually hides the problem within.

Collapse
gablaroche profile image
Gabriel Laroche Author

I agree, if I can change the html to fit margin: 0 auto; or flexbox I will do it. However, I'm working on a beast of a website and a lot of content is generated via freemarker and changing the html in some of those files could create huge regressions throughout the website and as deadlines approach, you might not be able to check every knook and crany of the website. So, in my opinion, hacks are a necessary evil

Collapse
madebyreformat profile image
Ben Palmer

This is way back OG but before transform we had to use negative margins

Collapse
iamzoka profile image
Zoran Zlokapa

This kind of centering is still useful when you need that element to be outside of the document flow, like overlay or modal. In any other case, use flex. Good tip anyway :)

Collapse
gablaroche profile image
Gabriel Laroche Author

Yeah definitely! :)

Collapse
davistran86 profile image
davistran86

Thanks a lot, I'm looking for this.

Collapse
umutcnkus profile image
Umutcan Kuş • Edited

I fought with this kind of centering approach in the beginning of my Web journey so much that just seeing this translate()'s gives me headache. (:

Collapse
gablaroche profile image
Gabriel Laroche Author

Sometimes, when flexbox and margin: 0 auto; doesn't work, a little translate is necessary :)

Collapse
martinkolodzie4 profile image
Martin Kolodziejczyk

Can I center the background in the same way as on this forum for example - esporttalk.org/ ??

Collapse
gablaroche profile image
Gabriel Laroche Author

Good Question, the background on this website seems to be a full width gradient and not an element.

Collapse
martinakuzniecowa profile image
martinakuzniecowa

Thanks for the very clear and efficient writing.

Collapse
gablaroche profile image