BIG NEWS "How to Center a Div" finally answered (new css property)

The align-content: center is now possible for block-level elements too. You no longer need Flexbox or grid to center an element vertically. In this CSS beginner tutorial we are explaining the align-content property in css and how it can be used to center a div vertically. This is now possible for block-level elements as of Chrome 123 has been released.
👉 Visit our website: www.coding2go.com
👉 Host your own website: www.hostinger....
👉 Learn HTML with our Course: www.udemy.com/...
*Key Topics Covered*:
New CSS Property: align-content: center;
How to Center a Div with CSS
Centering Block-Level Elements
More information:
"The CSS align-content property sets the distribution of space between and around content items along a flexbox's cross axis, or a grid or block-level element's block axis."
CSS MDN Documentation: developer.mozi...
Read more on Browser Support: caniuse.com/?s...
👇Here is an overview from the official mdn documentation:
The align-content property can assume these values:
align-content: start;
align-content: center;
align-content: end;
align-content: flex-start;
align-content: flex-end;
normal
The items are packed in their default position as if no align-content value was set.
start
The items are packed flush to each other against the start edge of the alignment container in the cross axis.
center
The items are packed flush to each other in the center of the alignment container along the cross axis.
end
The items are packed flush to each other against the end edge of the alignment container in the cross axis.
flex-start
The items are packed flush to each other against the edge of the alignment container depending on the flex container's cross-start side. This only applies to flex layout items. For items that are not children of a flex container, this value is treated like start.
flex-end
The items are packed flush to each other against the edge of the alignment container depending on the flex container's cross-end side. This only applies to flex layout items. For items that are not children of a flex container, this value is treated like end.
👆 This section is from the MDN-Documentation: developer.mozi...
Background Music:
Track: "Take Off", NEFFEX
Music provided by slip.stream
Free Download / Stream: get.slip.strea...
#CSS #WebDevelopment #HowToCenterADiv CenterDivCSS AlignContentCenter CSS3 WebDesign FrontEndDevelopment CSSHacks WebDesignTips ModernCSS CodingTutorial WebDevTips HTMLandCSS CSSProperty Coding Programming SoftwareDevelopment WebLayout BlockLevelElements

[@kitchentaste8705]

Thanks a lot bro and keep positing

[@Dorchwoods]

In my opinion it would make sense to also allow justify-content on a block element now as well. Text-align seems inaccurate and confusing as a lot of times you might be horizontally centering another div and not just text

[@zeusek-2137]

Can't wait for fix to that fix!😅

[@GrafikGerm]

It's a really great way. Thanks for sharing the tips

[@joan-mariacbrooks]

❤❤❤❤❤❤ CSS coding life just got a little bit easier! Thankyouthankyouthankyou!!!!

[@kooyaw4445]

Learnt a new thing today. Very informative and helpful

[@arifhaiman5]

Thanks for sharing

[@musmanshahid5866]

Good work keep it up brother

[@Mr.Unknown0701]

so now we can use the other properties of justify content

[@Sakinaqi]

use center tag

[@bbsnisso]

thank u, that was very helpful

[@coding2go]

Glad to hear!

[@bbsnisso]

@@coding2go no prob!

[@loandrisrojas5495]

Wait! What about vertical-align

[@DRAKKAR-95]

I really love you ❤ from morocco

[@theonly.lightfall]

Jesus. It's such a cool thing!

[@khorium9626]

FINALY!

[@Dj7wiLLY]

it..doesn't work for me ...
LE: work's, it was my fault :))) I forgot to set a height to the container so that the element will have the space to be align vertically :D Oups

[@alexcostal3749]

love it

[@shoaibmohammad6679]

Awesome

[@vishalkumarchoudhary8497]

1:14 is really centred any element using just align-content:center

[@coding2go]

Yes, any block-level element can now be centered vertically using align-content: center; You would also need text-align: center; to center the element's content horizontally. Currently align-content has 79% global browser support on block-level elements, which means that most browser do support this feature, but we still need to wait some time for the devs to implement that in every browser on every device.

[@MarufHasan-007]

that was useful

[@ramlaaal]

you are sent by god.

[@unknownguywholovespizza]

Now we just have to wait for some years to pass so we can use it safely 😁

[@punithr8661]

Actually, if you use flex, the containers are by default remains limited to the content (I mean the containers won't take up the whole width/length like a default div.). But this text-align and align content takes up the remaining space of the container too. Am I right ?

[@shivakumar8263]

Not working😂

[@nested9301]

Css is badly designed from the start what do you mean