DEV Community

Cover image for The Art of Centering

The Art of Centering

Ciaran Concannon on August 03, 2020

Like any good Wes Anderson flick, sometimes it's important for elements on our page to utilise the art of symmetry and draw our users' eyes to the ...
Collapse
 
theonlybeardedbeast profile image
TheOnlyBeardedBeast • Edited

one more, nowadays not that usefull

.parent {
  display: table;
  width: 100%;
}
.child {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
cjcon90 profile image
Ciaran Concannon

Cool! I've actually never used display: table; for anything but just reading about it now, interesting property! Thanks 😁

Collapse
 
theonlybeardedbeast profile image
TheOnlyBeardedBeast

This is the way we are using for old browsers fallback, in the worst case you have to use table elements directly.

Collapse
 
akdeberg profile image
Anik Khan

Great article.
My personal favorite is the flexbox one. However for centering anything in hero section I still go with the Absolute centering.
You summarized all of them neat and clean. Big kudos for that

Collapse
 
cjcon90 profile image
Ciaran Concannon

Cheers! Still very much a newbie, and first dev article of any kind I've written so means a lot 😁

Collapse
 
akdeberg profile image
Anik Khan

You just did a pretty good job 👍

Collapse
 
thorners55 profile image
Stephanie 🌞 • Edited

This was REALLY helpful for me today. Solved a couple of hours long "WHY won't this move?!" meltdown when I wanted to centre grid items. Thank you!

Collapse
 
cjcon90 profile image
Ciaran Concannon

Ah, thanks so much! First article I've written so that kinda feedback makes my day 😁 Best of luck with your page, and happy to receive a question if you're stuck on anything!

Collapse
 
madza profile image
Madza

came here to see place-items: center
was not disappointed 😂😂

Collapse
 
audreyspizza profile image
Audrey the Nerd

Super helpful, thanks! I feel like positioning in CSS is the perfect mix of math and art. Which is what makes it so hard to grasp sometimes!

I regularly forget about margins.

Collapse
 
admantium profile image
Sebastian

Great article, thx for the explantion of each different method

Collapse
 
thinkverse profile image
Kim Hallberg

With so many different ways to center elements with CSS, it's a wonder I keep forgetting then 9 times out of 10. 🤣

Collapse
 
btlm profile image
btlm

I remember when centering something vertically AND horizontally was a hard thing. Now we have neat flexbox and grid and your article explains even more ways. Such a great job with this article.

Collapse
 
shnarsingani24 profile image
Sagar H. Narsingani

Good article.
Only thing is you should mention , in the auto margins, that first we need to set the width of an element, then only we can center it otherwise it won't work.