Forem

Cover image for My Favorite Ways of Centering With CSS
Steffen Pedersen
Steffen Pedersen

Posted on • Edited on

1

My Favorite Ways of Centering With CSS

My Favorite Ways of Centering With CSS

Back in the day, I thought that centering with CSS was really tricky. Often, I made it much more complicated than it is. There are many ways to do it depending on the specific situation. These are my favorite ways of centering both horizontally and vertically.

Position absolute

The first method or approach is the absolute positioning. We know the height and width of the child and we can then use margins with a negative value of half the width or height of the child.

.absolute.parent {
  position: relative;
}

.absolute .child {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -110px;
  margin-left: -110px;
}
Enter fullscreen mode Exit fullscreen mode

Transform translate

But what if you don't know the height or width? Then you can use the transform property with a negative translate of 50% in both directions. There you have it!

.translate.parent {
  position: relative;
}

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

Flexbox

Something that I came across later on is the flexbox approach. It's genius! You just need to define two properties with center - which is justify-content and align-items. That's it! You could also write flex-end if you wanted the element at the bottom right corner. Flexbox is actually really really fun.

.flexbox.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
Enter fullscreen mode Exit fullscreen mode

If you know other ways of centering elements, please write a comment below.

Do you use another approach? 🤔
Do you use Sass mixins or other cool things? 🤔

Thank you for your time!

If you liked this, then please ❤️ and follow me on Twitter.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (2)

Collapse
 
link2twenty profile image
Andrew Bone • Edited

This is just another way to achieve the first method, just without the negative margins.

.absolute.parent {
  position: relative;
}

.absolute .child {
  position: absolute;
  top: calc(50% - 110px);
  left: calc(50% - 110px);
}
Collapse
 
steffenpedersen profile image
Steffen Pedersen

You are absolutely right 😊 But I'm so happy, that flexbox is well supported in these days. It is so much easier and looks much more clean.

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay