Vertical align


#1

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?

https://jsfiddle.net/77ua29x5/2/


#2

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).


#3

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


#4

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


#5

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