it seems every time i try to do this, i can't replicate it without making a huge mess that is incredibly obnoxious to tidy up. as you can see on my pet

Pinafore i have made a profile that is centered both horizontally and vertically, but the code i used to achieve this effect is honestly kind of gross—and certainly full of redundancy and contradiciton—to the point that i genuinely can't figure out which part is doing what.

warning: disgusting CSS below

, -ban, -ban-main, -lrc, -rrc, , , -right, , , , .bookmark, , , .prototip, , h2, .hustler, , , , .pet_age_info_date, .pet_wco_info_date, .legacy-name {display: none} , , {margin: 0!important; border: 0} *{margin: 0; padding: 0} -content, .notice {background: none; border: 0} .container-fluid {margin: 0px}

html { width: 100%; height: 100%; background: url(http://i.imgur.com/cp5NKZN.jpg) left top repeat }

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

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

{ height: unset!important; width: 900px; background-color: transparent; color: ; padding: 0!important; font-size: 12px; font-family: bell mt; text-shadow: 1px 1px rgba(255,255,255,0.3); overflow: visible}

{ background: url(http://i.imgur.com/oI49Xpp.png) center center no-repeat; height: 600px; width: 900px; margin: auto}

so i want to achieve this same effect on a different profile, but with more elegant code. the problem is... i still can't figure out how to get the vertical part working. i recall being told this is an issue with 's profile reset code, which evidently does something that interferes, but i don't remember which specific component is being altered in a problematic way so i don't know how to counteract it.

you can see the profile in question here:

Tix and this is the relevant code so far:

SPOILER (click to toggle)

@ import url('https://bug.bz/subeta/css/reset/pet.css'); .hustler, .new-news-announcement-banner, h2, h2, , , .pet_age_info_date, .pet_wco_info_date, .legacy-name {display: none}

html { background-image: url(https://i.imgur.com/YTyNCJj.gif), linear-gradient(, ); background-attachment: fixed, fixed; background-repeat: repeat, no-repeat; }

body { width: 1055px; height: 730px; margin: auto; font-family: Silkscreen; font-size: 10px!important; }

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

{ position: relative; width: 1055px; height: 730px; border: 1px solid blue; }

(a space has been added between @ and import to prevent the forums from trying to parse it as a ping, but it is written correctly in the actual code itself.)

any help would be greatly appreciated!

all you need to do is add the correct height to -content - it's currently set to height:100% now (through bug's code) so it's throwing everything off! -content{height:730px;min-height:730px;} this should fix it!

i don't think your css looks gross, it is redundant but in the way that code needs to be for subeta because the subeta profile css is so messy and old so you need to write heights for every single random div and everything lol. it was perfectly easy to understand for me! your profiles look so fantastic too!

edit: i might try to write a "base code" for a vertical centered profile if that would be helpful/make things less confusing to copy to new profiles? for you or other people looking to do this?

ahhh that worked, perfect, thank you so much! it's just that there's so many sections and subsections comprising the overall profile layout, before you even get into the individual components, and i can never remember which one needs to be in what state... page? main content? content? container fluid? pet info? why are there so many??

my main problem with that older code is that it's so cobbled together, namely that ancient "reset" code at the top (which i'd just been copy-pasting from my oldest free-template-based profiles years and years ago, and which probably could have been done much more efficiently) that still leaves behind unwanted margins and padding so then i have to go through and figure out where the misalignment is coming from, only to possibly contradict that later on in the code... yeah, i much prefer the "true" blank slate 's reset code provides, plus the fact that i don't actually have to look at all the guts just makes me feel better lol.

anyway tysm, i'm glad it was something so straightforward. i'll definitely keep that written down somewhere in the inevitable case that i need to do this again in the future.

[edit] oh wait, i just noticed an issue though... when the window isn't tall enough to display the whole page at once, it goes off the top edge and you can't actually scroll up, only down. pinafore's profile won't go beyond the top of the page, so you can just scroll down to see the rest of the profile. hmm.....

add this as well for that new problem! the div is a flexbox, which is what's vertically centering everything. if it's taller than the screen size, it'll vertically centre it weirdly, so... {height:auto!important}

ah yup that was it, tysm! i couldn't figure it out just by comparison because i didn't have to set the page height on pinafore's profile—looks like bug's code sets it to 100% which is what was interfering. i feel silly not knowing all this when i've been doing subeta profiles for so many years but they just have so many little fiddly parts lol...