How to vertically align text to div
window-width on the other hand is not really needed because each element which has display: block automatically spans the full available width. What is great about this setup is that if I have my content vertically centered and I make the row full width, the content stays centered. This would not work if there was something other displayed, like a top bar, because then you would have a scroll bar, or had to do something like this: height: calc(100vh-$top-bar-height). Or if I wanted to bottom align the content, simply change justify-content: center to justify-content: flex-end. It sets the height of the div to 100vh which stands for the whole viewport height. Row sets the display property to flex, justify-center centers it horizontally and items-center centers it vertically.īut in order to work, we need a height for the element. The interesting part is the classes applied to the wrapping div: window-height window-width row justify-center items-center
If you want centered login form, try this snippet: Go ahead and inspect the height of the elements in your example and you will notice, that they are exactly the height they need. Use text-align to align the rotated text however you want. This way the div can hold multiple lines or other things. To vertically align rotated text I used grid and grid-template-columns to put the rotated text beside the div. So to have an element centered vertically (at least to be able to see a vertical center), the element must have a higher height than the auto calculated, which should make sense and is not an issue with CSS but how the box model works. With transform: rotate (180deg) we end up with the -90 degrees look we want. Even if you give it the full-height class, it only sets the height to 100% of the parent div. Normally a div only has the height it needs. Oh, the hard coded height is only there to visualize the centering.