DEV Community

Cover image for Centering in modern CSS
Marius Eisenbraun
Marius Eisenbraun

Posted on

25 7

Centering in modern CSS

Centering stuff in a layout sounds like a usual thing. Everyone does it in designs, sketches or even Word documents.

But for the web it was complicated for years to centering content or HTML elements - especially in vertical direction.

The good ol' time

You could use things like display: table or later positioning + transform: translate(). It works! But explaining that behavior to new developers was always a bit uncomfortable. Because the newbie and the teacher both got that feeling:

"There must be a better solution!"

Well, it is!

modern CSS

In the CSS-era of flexbox and grid both display types offer an easy solution to this one big question:

.container-element {
  display: grid; // or flex!
  align-items: center;
  justify-content: center;
}

What ever element will but put inside that container, it will be centered. In both directions!

In addition there are two more benefits:

  1. No fix values, means: responsive by default!
  2. Not only centering child elements but also centering the pure text content of the container

a short demo using both:

Codepen: https://codepen.io/mreis/pen/WNbXPeB

πŸ‘‹ While you are here

Reinvent your career. Join DEV.

It takes one minute and is worth it for your career.

Get started

Top comments (6)

Collapse
 
darival profile image
Darival β€’

There is also another way to do this with grid.

.grid--container {
display: grid;
place-content:center;
}

Collapse
 
mr_eis profile image
Marius Eisenbraun β€’

Yes, that should work to!

For the once, who doesn't know:
place-content is the shorthand for align-content and justify-content.

align-content has a different behavior than align-items. I guess, I never used align-content, so i didn't want to mention a technique i haven't tested in real life.

Did you use align-content? Why / in what context?

Collapse
 
russellbishop profile image
Russell Bishop β€’

If you have just one child element to center, you can set flex on the parent and margin auto on the child.

Collapse
 
mr_eis profile image
Marius Eisenbraun β€’

Yeah, that's a very nice solution, too!

For myself, I like to use the container to take care of its inner layout. That's why I wrote about this approach.

Collapse
 
adamwojnicki profile image
Adam Wojnicki β€’

In the first example I'd pick flex. In case somebody expects IE compatibility.

Collapse
 
mr_eis profile image
Marius Eisenbraun β€’

In general, both display types result in the same rendering.

If compatibility is needed, flexbox is maybe the better solution.
IE11 supports grid too, but has many bugs. So I'm not sure without testing, if this solution would work as expected.

πŸ‘‹ Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay