i spent ages getting pinafore's profile to be centered vertically and horizontally on all window sizes, but at some point in the last couple of months, the vertical alignment stopped working. the issue seems to be that no longer moves vertically as the page resizes. the horizontal alignment still works fine, though.

anyone have any thoughts on what the problem is / how to fix it?

I remember this profile. Did you look into the suggestion I made in your last topic? revamped an old pet profile

yes, i tried doing that but i can't get to center vertically.

What's the current method you're using to try and center it vertically?

this is how i had it previously, might be kind of messy but it was working before:

body {margin: auto; height: 600px; width: 900px; overflow: hidden}

html { display: flex; width: 100%; height: 100%; background-color: ; background-image: url(http://i.imgur.com/oI49Xpp.png), url(http://i.imgur.com/cp5NKZN.jpg); background-position: center center, left top; background-repeat: no-repeat, repeat}

Can you explain it? How do you expect the code you posted to result in centering pet_info vertically? (Not a trick question, sorry if my tone sounds bad, couldn't figure out a way to ask this without sounding weird...)

it wasn't specifically centering ; it was centering the entire BODY of the page horizontally and vertically. i know vertically centering stuff is one of those finicky things that there's no real good way to do, but based on everything i'd looked up, display: flex was the solution and it did work. it's only recently that everything got misaligned.

Nothing wrong with using Flexbox :) I was more asking about how you meant for it to work in this case. I think I understand now.

In general I would avoid styling html/body unless absolutely necessary. Styles on containers will propagate downwards to the children, so when I want to style something, I try to do it as close to that element as possible to minimize unwanted side effects.

If we look at the hierarchy that pet_info lives in, it is like this:

page (id) -> content (id) -> .container-fluid -> pet_info (id)

Inspecting the page shows that the .container-fluid div has the same dimensions as the pet_info div, so we can look upwards a level. The content div is weird. If you resize the page with the inspector open, you'll notice that the height seems to get set as an inline style, which indicates that some javascript is at work. We can override this with the !important tag. So on content we can set a height: unset!important.

Once that's done, we notice the height of the content div's content box has shrunk around its children. But it still has padding, so the next step is to unset the padding (by setting all of it to 0). After that point, it also becomes the same as the others. So what we end up doing is centering content inside of its parent, div id=page.

The page div has a min-height of 100%, which means it'll be at 100% height as long as the contents don't overflow the page. So we can now set our flex properties on this div.

display: flex; flex-direction: row; align-items: center;

The "align-items: center" is what vertically centers it (given that flex-direction is set to row). Horizontal centering could be achieved here with justify-content but it is not necessary because margin:auto on your body is already accomplishing this for you. If you inspect it, you'll see the margins on the body are centering the entire body horizontally and you've forced it to the smaller width, which works.

Hope this helps :)

omfg... that works beautifully... thank u so much... i always forget that the page element even exists lmao

No problem ^^

This is a good page for learning more about flexbox. You just need to be really aware of the hierarchy of elements in the page and the key attributes for determining their behavior relative to everything else: position and display, height/width/box-sizing/margin/padding.

I hope I wasn't too unclear in my last post - I tried to go through my entire thought process instead of just giving you code, so you could see how I arrived at it too. But I always end up typing a lot when I do that...

it's cool i think i kind of understand :P i didn't realize something was messing with the content div's dimensions and it didn't even occur to me to check.

also thanks for the link, i've been meaning to figure out flexbox one of these days.

Haha flexbox can be confusing... especially if you are someone like me who is left/right-impaired. I have a lot of trouble not mixing up directions. It's amusing to watch me code because I'll always cock my head (in confusion) and then wave one of my hands to remember if that side is left or right T_T

Basically, a lot of it depends completely on the flex-direction. It's like the "axis" along which everything is aligned. If you change the flex-direction, then all the attributes kinda flip in their meaning. So like, instead of thinking "horizontal" or "vertical", you have to think "along the flex-direction" or "perpendicular to the flex-direction" (something like that?)

...so it can be hard to keep straight in your head! And if you are like me, then I recommend grabbing a whiteboard and just drawing a diagram to keep it clear which way everything is going.