HomeОбразованиеRelated VideosMore From: Dustin McCaffree

How To Vertically Align in CSS [Beginner]

75 ratings | 3078 views
In this lesson we will learn how to vertically align elements using CSS. This technique can be used to center just about any element within another element and is responsive (meaning it will stay vertically aligned, regardless of screen size). You won't have to calculate pixel values of margins and padding. No more guess work and eyeballing to see if things are centered. Just use this technique to center anything vertically and you will be set! TL;DR - Use `position: relative` and `top: 50%`. Then, add `transform: translateY(-50%)`. This will center the element vertically. Code Pen: http://codepen.io/StraightToWeb/pen/evaxvX Comment with questions or ideas, like the video, and subscribe! ========== WEBSITE: *coming soon* FACEBOOK: facebook.com/straighttoweb TWITTER: twitter.com/straighttoweb ========== MORE RESOURCES: Vertically Center Elements: https://css-tricks.com/centering-css-complete-guide/ Class Selectors [HTML/CSS]: https://www.w3schools.com/html/html_classes.asp ID Selectors [HTML/CSS]: https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors Variables [JavaScript]: https://www.w3schools.com/js/js_variables.asp
Html code for embedding videos on your blog
Text Comments (10)
The Evan Blog (8 months ago)
Hi, I'm having some problems with this method and I have no idea why. Tried to use the following in my CSS to make a nav centered within a div (the goal is a header block at the top of the screen, with a list of navigation buttons centered vertically and positioned towards the left): #nav{ list-style-type:none; position: relative; top: 50%; transform: translateY(-50%); } But the transform: translate part isn't doing it's job in putting the center of the <ul> element (what I used to create the nav buttons) in the center. In fact, the transform:translate part of the code doesn't seem to do anything when I remove it or put it back in. I found a work around by setting the top 50% to top 40% surprisingly, but still don't understand why the transform: translate part of the code isn't doing what it's supposed to do...
Dustin McCaffree (7 months ago)
Try making the parent element have `position: relative;` and change its positioning to `position: absolute;` That should solve the problem for you. :)
Ronald Brown (1 year ago)
bro this is by far the best css centering video ive seen. Its simple you explaining everything its great. My question is that now responsive and if not can you make a video on it? Responsiveness is my weakness at this point.
Dustin McCaffree (1 year ago)
Thanks so much brother! Yes, this can be used responsively. At this point in Web Development, you can't make a website that isn't responsive! So, anything I teach will be aimed at building responsive layouts. If you want a great resource for mastering responsive layouts, head over to https://responsivedesign.is/guidelines/ There is a pretty good guide on the basics of responsive design and what you should be aware of. Otherwise, feel free to keep learning here! :) Thanks for watching!
Craward (1 year ago)
Yeah, that works if you know container's height. If you don't then various hacks arise: vertical-align (which requres inline-block elements and/or display: table on the container), relative > absolute (which works unless you have other elements inside container), flexbox or grid (which still has bugs, especially on web-kit and mobile. iPhones cannot render flexbox inputs inside forms?! WTF apple?!). I'm no expert but i'm sure there's more than a TON of various edgecases out there.
Dustin McCaffree (1 year ago)
Also, I'm sure there are some situations on a live site when this wouldn't work (like with so many things on the web haha), but again this has been the most reliable method for me. I work full-time as a web developer, as well as doing stuff on my own all the time and feel like I've tried a lot of other solutions that just don't work quite as well!
Dustin McCaffree (1 year ago)
Ah, I see the problem you are having. `auto` will only detect an empty div, because the paragraph element is set to `position: relative;`. Thus, you won't get any div height, and the inner paragraph cannot be centered. The % is a different issue, which you would not normally encounter in a real website. Because the "container" div doesn't have a parent element of its own, it can't be a % of nothing, so it again will have issues. That being said, in real scenarios, I don't really have problems with this. As far as horizontally centering goes, same trick can be used but with `left: 50%` and `transform: translateX(-50%)`. Or you can do both horizontal and vertical with `top: 50%; left: 50%; transform: translate(-50%, -50%);`.
Craward (1 year ago)
Well, set container's height to auto or percentage and .paragraph-vertical to inline-block. At least on codepen it will not center. If you want to make horizontal nav *reliably * you have to resort either to flex or padding :\
Dustin McCaffree (1 year ago)
Appreciate the comment though. And you are correct in assuming there are always edge cases and many types of implementations! :)
Dustin McCaffree (1 year ago)
Craward this actually works without knowing the container's height. Which is why I shared this implementation! :) It is percentage based and works more often than anything else I've seen. Give it a shot!

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.