Hey @timoto you can type in VH or vw for height or width on elements (I use it all the time). So if you wanted something to fill the full screen, type in 100vh for the height and 100vw into the width field 
Webflow supports it 100%, you just have to type it in. 
Thanks @Waldo, but what I’m wondering is how we achieve vertical alignment, as in the title of this post, with vh / CSS, but without JS offered by the op.
You can set your element to center align with the margin button, then set position to relative or absolute within a parent container that had a set height. And then do too 50% and transform Y -50%. I’ll post screen shots soon as it’s changed with the new 3D Transform UI. No need for any external scripts at all
Hey @timoto here’s how to Vertically Align Content.
Give your parent element a height (any height, in this case I’m using 100vh).
Then set the element which you’d like to center align to absolute or relative positioning (depends how you want it to sit exactly). Give the element a width of 100% and a max-width (no need to set a height on your element you are centering, just keep it as auto and you can add a max height if needed).
Then scroll down to the Transitions & Transforms module and give it a Y transform of -50%. Then you’ll have a vertically centered element.
Please let me know if you have any questions @timoto
2 Likes
@Waldo Great, that’s certainly a preferable method.
This works with a standard div container and text element, but when attempting the same on a Nav Bar and Nav Links provided by Webflow’s menu, I am not able to achieve the expected vertical align. It seems to be that something is overriding the initial position top 50%.
As a test, are you able to make a Nav Bar container 100vh and then position the Nav Links top 50%, Y -50% to have them sit half way up the viewport ?
Hello @Waldo , Any thoughts on vertical alignment with Webflow’s pre-built Nav Links inside the Nav Bar ?
Hi @timoto
Try giving your navbar a position of relative.
Then do the vertical align trick @Waldo showed you. But minus the horizontal alignment.
Hope this helps
Cheers,
Nelson
1 Like
Hi @PixelGeek
Thanks but it was already relative:
As you can see the navlink elements do not sit vertical half way up/down their nav parent of height: 20vh, instead they creep off the top of the viewport. My guess is there is something else in the webflow NavBar element that prevents me from doing this the same way I am able to do it with a standard div and text element like so:
Have you tried this yourself with a Webflow NavBar ?
Hey @timoto could you please update your post with a read-only link so that we can help you faster?
How to Share a Read-Only link to my site: Share a read-only link | Webflow University
Thanks in advance!
@Waldo Sure here you go: https://preview.webflow.com/preview/nav-vh?preview=5a0c0069e0b1185a2ce0d8e7ad0056f2
But you can also recreate the issue simply by dropping a NavBar into a fresh page, set it’s vh height to say 20, then set the Nav Links with position: relative 50% top, and transform Y-50%
You should see the same result as I do, where the Nav Links creep off the top of the viewport instead of the center vertical alignment of the Nav Bar.
Hey @timoto the reason you’re getting this issue is because the nav links are child elements to the nav menu which is a child to the container holding them. So if you put that same vertical alignment on the Container holding the nav links and removed that vertical alignment from the links, then you’ll get the desired effect.
Or you can move the “Nav Menu” outside of the container, and apply the vertical alignment to it
Please let me know if you have any questions.
1 Like
Doh !
Why didn’t I think of that !?
No worries glad we were able to get it figured out