The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #251542

    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?


    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.


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

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.