Vertically centering WITHOUT flex or grid? It's so easy now!
Vložit
- čas přidán 7. 05. 2024
- We can vertically center in CSS without having to change the display property in CSS! All we need is an align-content: center and we're good to go!
#css
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
We've come a long way since the days of using and to vertically align content!
Still have to do it in email templates. Don’t worry.
That's great, but I'll still be googling "How to vertically center a div" everytime I have to
I feel so seen.
Yes, it would have been too easy to name it align-vertical ?
This one completely snuck up on me, I only heard about it a few days ago and it's already got such good support. Really nice qol feature!
Cool!
I am a backend developer and I really don't like fronted, but of course I cannot avoid it sometimes. Your shorts are really helpful
Can't wait to see 100 more ways to center a div in 25 years from now. 😂
It's a crime this wasn't in the very first release of CSS. Who had to retire/catch an unexpected bus before this was sensibly added?
THAT WORKS ON BLOCK ELEMENTS?! Oh God
Is there any horizontal alignment equivalent for it?
Improved! 📈
I’ll honestly just stick to my flex box for centering unless it’s a page layout, in which I’ll use grid, but still, pretty cool to see they’ve added block level support!
Woaw! That is crazy!
About dang time!!!!
Lovely! 🎉
That's why i subscribed
Is there an inline axis version of this for block elements or is margin: auto still the way to go?
margin: auto would still be the way to go there.
Awesome! Is this a new feature or been a while but under-used
Savior!!!
amazing, definitely will use it.
but still finding grid and outside in control easier. especially with components with isolated styles.
i wonder how does this behave? espacially with margins and stuff. does it work like grid with a single area? well probably it's not because of margins.
gonna play around with this when I have time
Nowadays we can simply use a table layout
Omg no way!!
@KevinPowell, if i want to center it horizontally and vertically (given that the element is a block level element), I can simply just add “align-content: center;” for vertical centering and “margin: auto;” for horizontal centering, and I should be good to go?
No, or well, probably not 😅. Align-content will influence the children, margin auto influences the element you declare it on
Ain't no way boi!!
Then there's me, who tries every center CSS till it aligns then just uses that permanently.
but won't it create a bit of confusion?
For example display flex has the same-named property of align-content (along with align-items)
It removes the need to use flex or grid if that's all you want to do, which is often the case.
I just realized this like 2 hours ago, idk if someone's spying me cuz wtf
how this works without display flex?
They updated the spec to remove the requirement for flex or grid
@@KevinPowellOh, that's great. By the way, I love your videos. They are always very informative and useful.
cant imagine such a basic function need chrome 123 ...
Wait, I thought align-content was always for a flex container...
Is this why it would never seem to do anything when I applied it on a flex div?
My go-to method till now has been align-items and justify-content center after display flex.
It won't work with flex because, with flex, you need the ones you said. This is a shorthand for align-content and justify-content
@@KevinPowell Thank You Kevin, my Front End Friend & Fountain of Fun Facts.
🫨
Do you know how to fix the viewport height? Ik the width one but not height
Not sure what you mean? 🤔
Viewport but height cuz phones and PC monitors have different height and width, I can fix the width
@@Ant_Dude_YT you can use 100svh
You mean to take the whole screen's height or what
@@ihtishamriaz2598 what is that? I'm new to these stuff
This is about 20 years too late 🤣