Vertical align


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


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


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


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