Position item half way down page (... the right way)

Hi. I used to be able to do this, back when I was using improper methods for positioning, styling, etc.

But, I find myself no longer able to vertically center items… at least in the proper/contemporary way!

I am currently building a front (landing) page, where I have a title/logo in the center of the screen. I would normally use something like a 45% attribute value on either the title’s top padding, or the height attribute of a blank div above the title… but that’s just not working for me.

So, I did a bit of research, but haven’t found anything… aside from examples using hard-set px values, which I can’t do, because the screen size will obviously vary with each case.

I tried a Flex div, and used the Flex alignment attributes, but that didn’t work either.

So, here I am, asking what is the current proper (fully compatible on all platforms) method of placing something halfway down a page?

have you tried using the viewport units?

45vh to position an element 45% of the way down from the top.

1 Like

Hi, droidgoo. Ya, I just noticed that attribute in Pinegrow yesterday, as I was working on my site.

As with all features, my main question/concern is browser/platform support (…without additional workarounds, coding, etc).

I couldn’t find a page on it in the canisuse site.

Also, is that the only way to do it? I have to try again today, but it seemed like the usual things (50% values, vertical alignment, etc) don’t seem to work. Even so, I’m not sure if those are ‘correct’ ways to do it these days.

the article talks about browser support.

( FACEPALM… ) Oops… Sorry. Somehow I didn’t notice it’s literally the first line of the article!

I’m now going to order myself to stand in the corner for a while.

But, ya, it’s been working for me on my system. Thanks!

1 Like