DEV Community

Discussion on: Centering Elements in CSS3

Collapse
 
ravavyr profile image
Ravavyr

Those methods are not bad and they work fine.
However with a title like CSS 3, I expected something with Flex or Grid instead as both your options have been around since CSS 2.

Here's how to do it with flex:
philipwalton.github.io/solved-by-f...
To summarize, put these rules on the parent:

display: flex;
align-items: center;
justify-content: center;
Enter fullscreen mode Exit fullscreen mode

That's it.

It's very similar with CSS Grid:
coryrylan.com/blog/how-to-center-i...

By putting this on the parent:

display: grid;
justify-content: center;
align-content: center;
Enter fullscreen mode Exit fullscreen mode