The only 2 correct ways to center a div

[@Wineblood]

If your div is big enough, it's always centered.

[@okaybossiamonyoutubeakkskd]

haha, nice one

[@Rhidayah]

Lol

[@AbduganiXolmatjonov]

it's funny but true af

[@overdrive112]

Is the div classed as „parent“ or why does it start with .parent? (I’m new)

[@pabllo7023]

​@@overdrive112it's probably just an example, if its .parent then its a class="parent" (I'm 99% sure)

[@SASA_maxillo]

10 seconds later: "oh, lemme google how to center a div again" 😂😂😂

[@subyouwont]

Literally 😭 😭

[@refrigegator7955]

You are a god amongst men. Working on a project for a class and in seconds you gave me an answer that other videos took minutes to get incorrect.

[@chrikke]

Except he is so wrong about these being the only correct ways. Remember, the correct way is the way that works

[@bn5055]

Unless for some reason you need to use position: fixed or absolute in which case you can use inset: 0; margin: auto; 😉

[@danalenne5565]

Thank you!

[@xadrain]

Only option if you want to rotate object in center point when you centered it.

[@deadliftdoll]

the relief i felt when my way is the first one you mentioned 😅

[@over-dose]

+1

[@self-learner4934]

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%)

[@purplevanilla]

margin: 0 auto;

[@RubyPiec]

[@StarForgers]

​@@RubyPiecI thought I saw center was depreciated?

[@RubyPiec]

@@StarForgers oh it is?

[@sagegamer8192]

Animation - wise this is bad

[@HloniTwala]

Saving lives of those who are beginners in coding, thank you !

[@alibhamjee8002]

Wooooewewwww thank you. Bro best video I’ve found

[@eruptic6503]

"Carefully, he's a hero"

[@laralopes8619]

that grid one... you were sent by god

[@abdurrafaywali4756]

Man that was a greeeeeeaaaaaattttt problem solveeeeeedddddd, AMAZINGGGGGGG!!!!
THAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAANKS!!!!

[@gilr.7]

This vídeo helped me a lot

[@karaz526]

thanks man i've been searching for a way to center a div without all the extra crap

[@MinecraftAchievers]

this was so helpful thank you so much

[@thewandererog]

justify-content : center is what I was looking for

[@_tanzil_]

It's 2023 and they are still correct

[@learnbypreet]

love it!

[@TheGreyMotion]

place-items: center works in flex aswell.. is a shorthand.. also.. inset prop..

[@GgggGggg-mm7ci]

JESUS MY SAVIOR MY SAVIORRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRR

[@jamemadison6499]

that grid part is new ... thanks man

[@ratulhasan-pu1js]

Brother, thank you very much.

[@funkdefied1]

Honestly after learning all these I still kinda like “left: 50vw; translateX: 50%” + repeat for top/y

[@dmgxmaximus]

thanks buddy

[@Horrordelic]

Yeah you need to do display: absolute/fixed center as well :)

[@SuprEmpth]

Can you explain why? I'm learning and not understanding all these different methods

[@kdensport]

Absolute/fixed is a values from position, nothing related with display bruh

[@AkunRumahDayeuhkolot]

thankyou so much!!!!!!

[@sargaa8471]

0:00 for the normal version

[@sumitprajapati-jc6sn]

thanks brother

[@YeneSpace]

sadly it didnt work out for me. I tried both correctly but I dont know where its falling apart.

[@Thorin-uf4yt]

You need to set the parent div height

[@indhurajc3814]

​@@Thorin-uf4yt but.,
If I want particular size of the div box.,
That time how to i put value of Height in vh.,
If I put like ur suggestion.,
The div height is collapsed..😢

[@timecircle8420]

Just subbed

[@ajothestranger]

thank you!

[@michaelpatrick777]

Me :
margin-top: 50em;
😂

[@TechBox2026]

Very cool 🎉

[@grkb]

for me if i want to center only horizontally i just do it like in the old days and use the center html tag (although i think it’s deprecated), but if I want to center both ways i use flex like in the video.

[@Redlaw]

I see you also dont see red markings in vscode as errors and rather as suggestions... i, too, used center tag a while back but can't stand red in vscode, so I stopped, but yeah, it still works in all browsers

[@alphakhangaming4073]

Thanks you Soo much

[@joshuarackal]

Thank u so much

[@givowo]

rip

[@raflifirdaus2788]

ohh... thank jesus that's what i am searching for ..

[@power_napppp]

its 2023 man! make another video

[@sharonedwin1403]

Thank youu!

[@sayyednaila4369]

my way to center a div (first one)😅

[@kakashi99908]

I cant remember positioning for more than 1 hour 😅

[@am2383-o2q]

i will use "margin: 0 auto" forever

[@MultiEMitchell]

The king of inline-block

[@chiggywiggy524]

.container {
width: 90%
margin: 0 auto
}

[@gon2064]

Is it different if i use margin: auto; ? Because its work too

[@Va9bhav]

​​​@@gon2064actually its not a good practice because it will set all 4 direction to auto so @arm162 code is perfect because first value js for top and bottom and second value is for left and right
Btw U can use
Margin-inline:auto;
Sry for bad English

[@mikemhz]

This has never worked for me

[@Semilore317]

There are other ways like:
Display: block;
Margin: 0 auto;
And
Parent {
Position : relative;
}
Child{
Position: absolute;
Top: 0;
Left: o;
Transform: translate (-50%,-50%)
}

[@theworldfacts520]

Best way
Margin-top: 10px;
Margin-left:10px;
😅😅😅😅😅😅😅

[@melitajm4286]

Thanku😊

[@geicothegecko8124]

justify content center saved me thanks programming jesus

[@patahgaming]

Align-item center for no reason won't change 💀

[@war_xs]

Ty!!

[@Aqmedk]

thanks!

[@CodingLearner-t4o]

What about margin:auto;

[@josephquintiliano2904]

This only works when I include the height of the parent container (100vh) - but now my question is… why doesn’t 100% work, and how do I stay away from vh units, leaning towards percentages while accomplishing the same thing?

[@covermiddleage8132]

Without first and last point how you find center point?

[@sandhilt]

Position absolute and transform.

[@techtipstricks2776]

thanks dear

[@jakubschulz4353]

So what's wrong with margin: auto; or position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) and many other solutions?

[@Robin270]

Technically nothing at all 😂 I find myself doing that from time to time, but the flex method replaced it in most of my codes. And I also guess it's easier. And ofc there are a few other solutions, and other than using a tag (which is has been outdated because of lost support from browser quite some time ago) and maybe a few other things, they all are working and up to you what you'll choose.

[@aqumy]

that is not true. what if my div is position: fixed;? Then it ignores the outer flexbox container.

[@KanxiPokhara]

What about display inline block

[@devonchia5976]

What if my parent is the body(entire page) itself? What css should i add in order for this to work?

[@devonchia5976]

@@wollie1769 how abt 100dvh?

[@indhurajc3814]

Not working.,
Bcz.,
we must mention *height:100Vh* before align- items: center

[@petra_bunic]

Can we use it when we want to keep webpage centered while zooming out?

[@Guy_Sandler]

Im not good at css, is a center tag and position: relative, then lowering it 50% ok?

[@with461]

You are from Italy?

[@dnovus]

what about calc() with hardcoded magic numbers?

[@aswinp7323]

I thought it would be ask chatgpt

[@urbangaming7334]

Position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

[@aurorapaisley7453]

this is the 'ol reliable and I still use when I feel icky using grid or flexbox out of nowhere

[@Freprepp]

what about text or span?

[@Player-ux4ke]

After 1 hour of researching the only true answer was a YT short.... And all the answers from Google failed.

[@deaddoomed2380]

I put alignt-items: center and nothing happened T.T

[@semlon5266]

The flex box must have height at 100% ofc

[@deaddoomed2380]

@@semlon5266 thx man

[@darknesskaneki]

what about ;-;

[@chiggywiggy524]

Its no longer used. It's a very old html tag and html can remove It's support of old tags in future therefore it is not recommended to use center tag

[@tsiolamo]

Now this one it's outdated too😢

[@KerenAywila]

The element (div, body or article) must have a height for it to work.
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

[@hoomanramin]

Height for parent is necessary

[@ArewaMubarak]

Please it not working

[@wrongsyntax]

What if i have multiple Buttons inside parent and they need to be next to each other in center?

[@TheFamousLife4Me]

Space-between?

[@Simping_is_Dead]

So sad… I still use margin: 0 auto 😂

[@ogreeni]

That’s perfectly fine if you want to center a div horizontally. Better yet, use the logical property margin-inline: center;

[@ruskibondes3509]

Thanks Jesus!

[@DaniBee2900]

daddy tho

[@zapphoenixstudios2065]

So true

[@toxicoxnt]

obg

[@ISLAMIC_CHANNEL_0321]

✅✅

[@yannry]

didn't work

[@KatDog-jl3fs]

this didn't work

[@IceifritGaming]

Wtf is a div? 😆

[@princeyoutuber1937]

Glt

[@Abir_Hossain111]

Free Palestine 🇵🇸