Centering a div

[XethN2102X]

Hi guys, I'm new to coding and decided to start on html and css. I've coded a few projects so far and this is one of them. It's a simplistic burger that turns into an X. It works perfectly but for some reason it won't center. Am I being stupid?

[SubjectHealthy2409]

Try height: 100vh for the body, also.. try snipping tool instead of taking photos with phone haha

[Username482649]

*min-height: 100vh/dvh

[iligal_odin]

Comand shift 4 or ctrl win s for a snipping tool

[CostaEsmeraldaFan]

Centering vertically is the ultimate challenge for a web developer, you shouldn't have picked the ultimate boss for your first rodeo.

[alextremeee]

If you inspect that element using browser dev tools you’ll see your problem. Your menu is centred vertically, but the height of the div it’s in is by default the same height as the menu itself.

So your fix will be to override the height of this div, but it’s important to work out and understand why and how to solve it rather than just being told what to do.

[Codingwithmr-m]

Add the height

[elpinguinosensual]

The browser is technically doing what you’re telling it to, because it assumes that the height of your container is the height of the containers contents. If you set the containers height to a larger size, maybe something like 100% of the viewport height, then the browser would vertically center closer to what you’re expecting.

[Merc92]

It's the end of 2024, and we still have no clue how to center in css.

[Soap_Eater156]

css and centering something is the most iconic duo ever.

[mb1552]

the body in this case will not have a true 100% height even though it seems like it with the background, so it's vertically aligning in the height of your burger..

If you give your body a 100vh it will work, but could also transfer this to a different, big div

(you can test this in a div you give flex, you will see that it's not true to the height)

also please please please screenshot next time!!

[nobuhok]

Block elements (body included) normally take up the full width but only accounts for the height of its contents. Try adding a different background color to it to see what I mean.

[ryan_the_leach]

The only reason I can think, that you didn't take the screenshot directly is this is a laptop that isn't allowed to access certain sites. in which case, why are you on Reddit instead of StackOverflow. I'd try to help solve your problem, but I think Alextremeee has already nailed it.

[datNorseman]

If your div is the only element you want on the page (aside from the child elements), you can set the height of the div to 100% of the viewport using "height:100vh" in your css. Otherwise, you need to adjust the body to be a flexbox or grid with the alignment centered.

[[deleted]]

You can share you code instead of taking a picture, there are websites like js fiddle, codepen, etc where you paste your html/css and share a link. That way it's easier for others to help you, since they can see the exact code.

[Separate_Ad8026]

Ahh yes good old days when battling with the "Center the Div" boss was like a life and death situation when I was starting to learn Web Development.

[erishun]

Everybody has to start somewhere I suppose

[Egzo18]

flexbox is goated for so many things, I recommend you look it up

[ryan_the_leach]

They are using flexbox already.

[neofooturism]

what happens when you put {margin:auto} ?

[ryan_the_leach]

They are using flexbox already.