I'm using pretty basic code but my profile for

• {margin: 0; padding: 0;} , , , , , , {display: none;} body, , {background: ;} .prototip {display: none;} /---------------------------------------------------/ body, { background: ; height: auto; width: auto; overflow: hidden; } { position: absolute; height: 480px !important; width: 800px !important; background: ; border: 2px solid ; overflow: hidden; top: 50%; left: 50%; margin-top: -240px; margin-left: -400px; } </style>

what do you mean by pet_info appears off the screen? I can see everything on the screen from my end - https://imgur.com/a/frkMxlm Could you screenshot and share your screen resolution if you're seeing it wonky for you? also which browser you are using in case it's relevant - sometimes browsers can be fickle in unexpected ways

This is full screen for me Your screen makes it look a bit off center too, is it possible to make it relative to screen size? It was working fine a couple weeks ago... I am using google chrome, I always have been

It's because you have top: 50%; left: 50%; It's not doing what you expect, because these percentages don't refer to the screen - they refer to the height/width of the containing block.

The "containing block" isn't the closest parent though - it's the closest parent that's also absolutely or relatively positioned. In this case, that means the "containing block" is the div with the id "main-content"

On my screen, this main-content div has a height of 1140px and width of about 1804px. This means your div is getting offset by 50% of those values: It's offset about 570px from the top and 902px from the left, which is why it's not centered.

Basically, you have the right idea for centering it: offsetting by 50% and then correcting with negative margins. But the problem is that it's using main-content as the reference point, and the main-content div is all wonky. You want to be using the screen size.

To do this, you can fix the height and width of main-content. This is a bit of a hassle to debug, so feel free to skip my explanation and just grab the code at the bottom of this post if you don't want to know. I'll explain it in case you're curious.

The width of main-content is set to 100%, so that means it's inheriting its width from a parent. If you trace it upwards, you can find that the div with id page is the culprit. It has a width of 94% and some margins that make it offset all weird. So you can correct that first by doing:

{ width: 100%!important; margin: 0!important; } That should fix the horizontal centering.

The height is a bit trickier to pin down. There is actually no height set on main-content or page, so we have to look at the children divs instead, since that means their height is determined by what elements are inside them. So the height here is actually caused by the div with id "content" stretching your height. Subeta has code that forces this to have a height of 1050px. You can correct that:

{ height:100%!important; } Unfortunately, that alone isn't enough, because the percentage means it has to inherit from the parents. So you need to go back and make sure height:100% is set on all the parents. That means you need to also set it on page.

That almost fixes the vertical centering. Turns out there was just one more spot where some padding was messing with it, so that explains the last line we need to add to this solution.

{ height: 100%!important; padding: 0; }

{ width: 100%!important; margin: 0!important; height: 100%; }

okay! Added the code, tested it, and... oh. uhh... Im starting to think something is wrong with my computer... I messed with it some more and couldn't find what happened <style>

• {margin: 0; padding: 0;} , , , , , , , .prototip {display: none;} body, , {background: ;overflow:hidden;} /---------------------------------------------------/ { height: 100%!important; padding: 0; } { width: 100%!important; margin: 0!important; height: 100%; } { position: absolute; height: 480px; width: 800px; overflow: hidden; top: 50%; left: 50%; margin-top: -240px; margin-left: -400px; background: ; border: 2px solid ; } </style> Take 2 >_<

Nope that was my bad for leaving out a piece of code. -content { height: 100%; }

When I said "So you need to go back and make sure height:100% is set on all the parents." I think at that point I just forgot that I also had to set it on main-content, not just page.

no problem, and also I have some tutorials here if you're interested https://bug.bz/tuts/