Vertical align

Hi I’m trying vertically align a header using the transform method

position:relative;
top:50%;
transform:translate(-50%);

but for some reason it isn’t working?

Remove the height:100%.

You don’t really want to use that method unless you are in a controlled space as there are better ways now to centre using flex or other methods (moving stuff with position:relative is fraught with danger if you don’t fully understand what it does).

2 Likes

Would you recommend using if I’m using for a hero image and have set the height to 100vh?

I’d do it like this as it will work right back to IE8 (although I only support IE11+ these days ;)).

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.