Vertically centering WITHOUT flex or grid? It's so easy now!

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!

[teugene]

We've come a long way since the days of using <table> and <td valign="middle"> to vertically align content!

[educationplace-tutorials-c]

I just discovered this by accident when I removed display: flex in a media query, but I still had align-content: center. I thought it was some mad glitch. Wonderful. SO happy! Well done, W3C.

[Turabbo]

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!

[siegfriedschmitz]

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

[Ghaz]

been watching these shorts for 20 minutes and already i feel like I have missed every cool css thing from the last decade lol

[markrm]

That's great, but I'll still be googling "How to vertically center a div" everytime I have to

[Sindoku]

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!

[timgerk]

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?

[rayyanabdulwajid]

Can't wait to see 100 more ways to center a div in 25 years from now. 😂

[hooooman.]

Is there any horizontal alignment equivalent for it?

[nomadshiba]

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

[adamuk]

Is there an inline axis version of this for block elements or is margin: auto still the way to go?

[CuongNguyen-syuz]

Can anyone explain why it didn't work when I used it with a .box and inside that .box is a svg tag? My .box height was 100px, my svg was just 32px but when I allpied it in my .box or my svg or even both. It didn't still work

[dancehalllyrics]

@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?

[WarehouseDev]

Awesome! Is this a new feature or been a while but under-used

[AlexCrMaReLiLukyanenko]

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)

[dasten]

Nowadays we can simply use a table layout

[Sealis]

Then there's me, who tries every center CSS till it aligns then just uses that permanently.

[salmanazam]

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.

[lexgim]

I just realized this like 2 hours ago, idk if someone's spying me cuz wtf