Centering Elements with Flexbox
samanthaming
•May 1, 2024
(Source/Credits: https://dev.to/samanthaming/centering-elements-with-flexbox-5f62)
The biggest CSS headache is "How do I vertically center something". Throw away your migraine pills,...
The biggest CSS headache is "How do I vertically center something". Throw away your migraine pills, it's now been solved with Flexbox!
css
.parent {
display: flex;
align-items: center;
justify-content: center;
}
Keeping this code note super short. Because I'll be spending the entire next month posting about Flexbox on my Twitter and Instagram Account!
The series is called #Flexbox30. You will learn flexbox in 30 days with 30 code tidbits. You heard that right, a new code tidbit every day for 30 days 💪 It starts September 1st 🔥
If you're interested in this FREE series, make sure you follow me on:
- Instgram > @samanthaming
- Twitter > @samantha_ming
Thanks for reading ❤ Say Hello! Instagram | Twitter | Facebook | Blog | SamanthaMing.com
Comments section
afozbek
•May 1, 2024
That's great Samantha. Flexbox is really amazing to learn.
samanthaming Author
•May 1, 2024
Absolutely! I think it’s a must know at this point! 😄 Hope you will be following the new series! 😆
lucashogie
•May 1, 2024
Thank you! <3
samanthaming Author
•May 1, 2024
You’re welcome 😊
codebrotha
•May 1, 2024
Thanks for this!
samanthaming Author
•May 1, 2024
You’re welcome! 😊
nicolalc
•May 1, 2024
You have different ways to handle this, I'll give you a cool tip:
Using place-[what] instead of align and justify:
``` .fully--centered { display: flex; place-content: center; place-items: center; }
```
Enter fullscreen mode
Exit fullscreen mode
this is equal to:
``` .fully--centered { display: flex; align-content: center; justify-content: center; align-items: center; justify-items: center; }
```
Enter fullscreen mode
Exit fullscreen mode
But with less css, this is cool when you have to define different complex flexbox layouts, and you want to save some lines of css.
CONS: obiviously IE doesn't support this shorthand.
afozbek
•May 1, 2024
That sounds amazing
mingyena
•May 1, 2024
Thanks for the tip!!! I didn't know place- before. A note for developers who are still working on IE - it doesn't support on either Edge or IE
samanthaming Author
•May 1, 2024
Super cool! Thanks for sharing! 🤩
ryansmith
•May 1, 2024
Thanks for the tip, I did not know about the
place-shorthands!