DEV Community

10 CSS Code Snippets Every UI Developer Should Know

Niraj Narkhede on October 22, 2024

Introduction: Supercharge Your Stylesheets with These Handy CSS Tricks Hey there, fellow UI developers! Are you ready to add some pizzaz...

Read full post

Vijay • Oct 22

A Really useful list of the snippets. Thanks for sharing.

Nowadays, centring is much easier with a flexbox and grid.

With Flexbox

.container {
  display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh; /* Full height of viewport */
}

With Grid

.container {
  display: grid;
   place-items: center;
    height: 100vh;
}

Davy TISSOT • Oct 23

For "The Magical Centering Trick" I use:

.center-me {
  position: absolute;
  inset: 25%;
}

.center-me {
  position: absolute;
  top: 25%;
  right: 25%;
  bottom: 25%;
  left: 25%;
}

I avoid using transform in this case for performance reasons. And when inset is supported, this is more concise.

PS: Don't forget to add position:relative to its wrapper if you don't want it to stick to the viewport.

Peter Vivo • Oct 22

trick good to remember parent need to be: position: relative

leob • Oct 22 • Edited

Yeah I like it, a couple of good tricks ...

Funny though that you're calling this "quick and dirty":

5. The Flexbox Centering Shortcut

but apparently this is "clean and elegant"?

1. The Magical Centering Trick

I would call it just the other way around ;-)

Hey just joking, I love this article!

TewDnl • Oct 22

Nice article and some great tips here.

To go along with #1 I have found that using margin helps with some pesky centering issues as well:

.center-this {
margin: 0px auto;
}

along with the parent position setting that Peter Vivo mentioned in his comment.

Ashutosh_dev • Oct 22

Nice.
But one thing, you can't change scroll speed, only scroll "behavior" is customizable.

Smitter • Oct 22

Good css tips shared

Shubhanshi Saw • Oct 26

Thank you for sharing useful tricks 🤩

Francis • Oct 23

Wow!, I really appreciate the way you broke down the concepts, making them easy to understand. This will definitely be helpful for both beginners and experienced developers. Looking forward to more insightful posts from you.

Doug Wilson • Oct 23

Handy! Thanks for sharing!

Nathan • Oct 24

I would opt for flex with the example you gave, and therefore most snippets are obsolete. Nice part about it, might be understanding of legacy systems.