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

Vertically center elements with CSS

682 ratings | 36017 views
Want more? Explore the library at https://www.codecourse.com/lessons Official site https://www.codecourse.com Twitter https://twitter.com/teamcodecourse
Html code for embedding videos on your blog
Text Comments (37)
Dan Cruz (4 days ago)
So far the is my favorite way to vertically align something that I have found!
GER BED (9 months ago)
I know you explained it a bit but why does the top:50% not center the content?
Blackbird (9 months ago)
You know what ? i just subscribed to your channel after watching this video. This really helped me. Thanks a lot. Happy coding.. 😀
IgomesTech (1 year ago)
Solved my problem. Thank you!
Aditya Hajare (1 year ago)
Take a look at this SASS Mixins Library : http://kylebrumm.com/juice/ I've been using it in almost all of my projects.. It has fixes for almost all possible CSS challenges we could ever come across.. :D
Hudson Long (1 year ago)
Can you please put the code in the description or reply on this comment
Kevin DeLaune (1 year ago)
Thank you!!!!!
Avijit Ghosh (1 year ago)
thanks bro...: )
TawFiQ Bouchemal (1 year ago)
you are awesome alex as always you are <3
Jap Jap (2 years ago)
what if I have text in the top, left, right, bottom. Will that be okay ?
Eden Reich (2 years ago)
Im a big fan!! Thanks for the great video!
Alex, it's something interesting to note here when an item is floating to the right, the container won't never be centered at the middle of the screen but left margin of floated container instead if I use position absolute, right 2px it does the job like it did for you! ~~ I didn't know so far, that floats won't permit this :D
Marc Spataru (2 years ago)
Nice tutorial
Nab Aus (2 years ago)
How about a tutorial to make a responsive touch-friendly dropdown menu ,using only css Thanks
This is my way to do it, and it works in IE http://codepen.io/anon/pen/xwZKeX
ui_wizard (3 years ago)
If you want to do layout, take a look at flexbox. There's a great site to introduce you to flexbox by Wes Bos at flexbox.io — I highly recommend it.
Tony (3 years ago)
Hello, Alex. Thank you for the cool tip. I started following you back in the day when you was doing videos for the New Boston. I wondered what had happened to you. Glad I found you again. Keep up the good work!
Zeeshan Gul (3 years ago)
thanks ♥ - via YouPak(.com)
Fehry Budiferandi (3 years ago)
Can you make a tutorial for bootstrap :)
Full Stack (3 years ago)
Every time clients ask for something to be vertically centered on the page I always wince just a little bit. Good tips! Thanks for the video.
Yoked Dekoy (3 years ago)
Hi your videos are amazing i just subscribed to your channel :) can you please do a Long Polling with php tutorial ? because i searched everywhere and couldn't find a way to do it.
raymond deloso (3 years ago)
hi alex..if Im not mistaken your age is 25 right? how were you able to master this stuff?how much time do you spend a day studying this stuff before?
George Irimiciuc (3 years ago)
Nice stuff, this is a common problem.
Suna Graycen (3 years ago)
display: flex; justify-content: center; align-items: center;
ui_wizard (3 years ago)
+Suna Orax align-items: center; :D
Piratekiller99 (3 years ago)
Why does this work?
Piratekiller99 (3 years ago)
+JWKTJE thx for your answer I didn't knew translate uses the height of the element itself instead of the parent one: good to know!
Kick The Jet Engine (3 years ago)
Translate by percentage takes a percentage of the elements height. So you can relatively position an element at 50% from the top of the parent, and then shift it up again by half the elements own height. Making it centered
MrMrwilson11 (3 years ago)
Very useful!
ExtraNullByte (3 years ago)
I like to use flex and then item align and justify content . but at the end of the day, what ever gets the job done =D
ui_wizard (3 years ago)
+ExtraNullByte Agree, it's a lot easier and only requires a single element with three properties; Which also is easier to make responsive however you want without too much hassle.
Vlad Macovei (3 years ago)
+ExtraNullByte I was about to say the exact same thing :)
Andrew Ng (3 years ago)
the transform 2D is supported from IE 9. If you want to vertically center with IE =< 8, you can use the display: inline-block; vertical-align: middle; technic. It has one withdraw, the container needs explicit width. I think I remember it can work without width but I cannot recall. I made a JsFiddle if anyone is interested, you can visit here -> http://jsfiddle.net/xe8b4uLj/
Valorous (3 years ago)
Yet IE11 still doesn't have full support for the translate function. What the fuck are the devs for IE11 doing with their time?
Piratekiller99 (3 years ago)
then valorous has his answer -> IE will be replaced by edge anyways IE 11 is just there for backwards compatibility lol and old projekts that need that (in companies) are highly unlikely to use stuff like that else they wouldn't need the backwards compatibility and could use edge
Alex Crocker (3 years ago)
+Piratekiller99 Yes it will work in Microsoft Edge because it follows Webkit rules for the most part, which is used by Safari and Chrome.
Piratekiller99 (3 years ago)
Does it work in edge at least?

Would you like to comment?

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