position: relative; top: 50%; doesn't apply until I mess with it after page load

[Leland]

I’m trying to vertically center a div using the “position: relative; top: 50%; transform: translateY(-50%);” trick.

Here’s my reduced test case.

It would work perfectly, but I’ve found the “top: 50%” style only works unless I edit in (in inspector, or directly in CodePen) up or down a percentage point, before adjusting it back to 50%. After this, it’s perfectly vertically centered, just how I want it.

But I’m totally confused as to why this doesn’t work on initial page load. Any ideas?

[Paulie_D]

I suspect this is due to the min-height on the section. If you change this to just height, it works fine.

I’m assuming that this “trick” requires a known height for the parent.

[Leland]

You’re 100% right. Just going to switch out min-height with height, which will work fine in my case. Thanks so much!

[Author]

Posts