Hi there! I am trying to achieve a design where the text is rotated 90 degrees and is perfectly centered in the middle and is responsive. I can’t figure out how to manipulate it so it’ll stay in the same spot on the page no matter what screen size. Any help would be appreciated!
The design I’m trying to achieve:
Hey Maddie, great question! I recently learned a way to do this by setting the top position to 50% and adding a 2D transform of -50% on the Y axis. Here’s a video showing how: How to vertically align an absolute positioned element
Hey Parker! Thank you so much for your quick and helpful response. I am wondering if there is a way to horizontally center it (instead of vertically center it)? I’m looking to have the left side of the text sit right in the center of the page where the white and the color side of the page meet. Is there a way to do this with the text being rotated 90 degrees?
I tried to apply the same rules that you showed me for horizontally centering it and I was able to do it, however, since the text is rotated, it’s aligning it perfectly as if it wasn’t rotated… if that makes sense.
Hello hello! Glad to help out. Sorry that I misunderstood your question. Are you talking about making the page look like this?
No worries! Yes that is close except I’m trying to get the left side of the text perfectly aligned with the white just like in this design mockup. Here’s a visual example of what I’m trying to do:
So in short, I guess the text wouldn’t be PERFECTLY center aligned, it would be slightly off to the right so that the left side IS perfectly aligned with the white side of the page.
Ohhh somehow I missed that your original post had a screenshot caption that you were going for that design. I’m sorry about that.
In this case, I would actually suggest using an image instead. That might be a little easier to work with. If you’d still like to use text, here’s how you could: Video from Parker @ Webflow
Ah perfect! Thank you so much, this worked perfectly!
