Hi everyone,
I’m struggling to center my absolutely positioned child vertically in its relatively positioned parent (in a responsive and clean way). I have made comments in the code on some of the things I have tried.
Anyone have any tips/advice
Is there a reason you need this to be positioned absolutely? If you get rid of that then you can use flex on the container to center it vertically.
Personally, I would not set the height in px for any of these containers. They should be able to grow taller if the user has increased the font size on the page.
I’m hoping to apply some js to it as a fade in animation and w3 said the parent div had to be relative and the child div had to be absolute (JavaScript DOM Animate )… Just curious. I think I could probably position it. I’m just wondering if there’s an optimal way to do it.
Could you explain a little more what you mean by “fade in”? Is the animation div going to move across the screen? Or is it always in place and just gradually materializing?
Also, check out CSS Tricks documentation on vertically centering things. I was able to get yours to center using the second method under “Both Horizontally & Vertically” but some of the others might work as well.
1 Like
Thanks for your tip Bruce, The height wasn’t changing so the content wasn’t centering vertically. In the end i added a !important (meh). I used the documentation you pointed out and it got me there, That link was really useful and prodded me in the right direction so thanks 
I’m creating a little alert/call to action for my product landing page. Part of the design is that this option to sign up fades in. I may drop it, but at least i’m pushing my limited js skills to their limits haha.
I would add bottom 0px;
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.