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

Centering with CSS

3097 ratings | 211292 views
I show you 4 ways to center crap with CSS! Woo! Center a div with css. Center an image with css. Center your mom with valium. CSS Basics Series - https://www.youtube.com/playlist?list=PLqGj3iMvMa4IOmy04kDxh_hqODMqoeeCy Late Nights with Trav and Los Podcast - http://travandlos.com/ Subscribe on iTunes - https://itunes.apple.com/us/podcast/late-nights-with-trav-and-los/id944869246?mt=2 Sign up for my newsletter - http://travisneilson.com/ --- Thanks and credit to these artists, whos work I featured in this video - Tristen Grant https://www.youtube.com/user/tristengrant - Imad Eddine Toubal https://www.youtube.com/watch?v=Tfc-p-RY55o - Celeste Boadas http://www.celesteboadas.me/ - Rafael Bucker http://bucker.com.br/33110/331348/projetos/impresso-no-brasil
Html code for embedding videos on your blog
Text Comments (483)
franshesco viran (25 days ago)
This does not make any sense, just gave me a headache
Tyrone Slothdrop (26 days ago)
Brilliant!! The final technique is exactly what I needed.
Anas Aleem (1 month ago)
@keyframes effect{ 0%{background-color:orange; left:0px; top:0px;} 25%{background-color:yellow; left:400px; top:0px;} 50%{background-color:red; left:400px; top:400px;} 100%{background-color:purple; left:0px; top:400px;} } my element change color but not moving as i coded in left top can some one help
Casper Lind (2 months ago)
i have text, which won't center. this doesn't work
DeAndre Perkins (2 months ago)
title says css but you are coding in main.sass (that's kinda sassy of you!)
Divine Zeal (2 months ago)
Center my mom with valium...finally the video i needed!
Flip Back (2 months ago)
Thanks for the Video!
Psylocke (5 months ago)
This is The Bible of Centering.
James Ricarte (5 months ago)
Thanks :D
Bobby Silver (5 months ago)
WTF is Jade?????? Why not just use html and css? Come on man, we are not all geeks.
Bobby Silver (5 months ago)
Thank you Sir for your polite reply. I do get frustrated when sometimes it seems you have to know everything before you can learn anything, especially where programming, web design, and geeky stuff comes in. Hardly any of this gets taught in school, especially when I went there in the 70's :-)
DevTips (5 months ago)
Hi Bobby! You're watching a video from 2014 - back then, Jade was really popular among HTML/CSS people. Much less so today and we're back to using HTML mostly. (Jade never affected CSS, it is just a more terse way to write HTML)
Eric Ellison (6 months ago)
display: flex rocks
Master Arrodox (6 months ago)
Cool
Jatinder Singh Aujla (6 months ago)
Amazing tricks and tips thanks 👍
ImGoinGhetto (7 months ago)
I give up, centering in css is fucking impossible.. I have an iframe element (pdf preview) and I have done everything possible. I HATE THIS! The only way i can accomplish centering is via left/right padding
Elkhan Hamet (9 months ago)
Amazing, thank you very much man, you saved me a headace!!!👍👍👍😊😊
TypeError (9 months ago)
There is another way do with JavaScript -------------------------------------------------- function centerbox(parent, element){ document.querySelector(element).style.margin = "-" + document.querySelector("parent").width / 2; }
Tigershot (9 months ago)
Wtf is jade and sass. So much for a beginners tutorial...
james D (10 months ago)
that was great. Especially the transform approach. Thanks.
Patrick Fung (11 months ago)
try position:absolute; left:0; right:0; thank me later
Osher Ezra (11 months ago)
Thank you , this was such a great video my friend best explanation ever so much helpful keep it up ::)
Johan (11 months ago)
While developing a website playing the video on my other monitor, the voice is so relaxing with that pinche of humor. Relax Travis, i watch it at an other moment for the content ;)
daniel imodoye (1 year ago)
love it. you are a great teacher.. and thanks for sharing this
Apporva arya (1 year ago)
very helpful video. Summed up: 1. display:inline-block and text-align:center 2.use absolute display with appropriate measures 3. use margin:auto
Haitham Mogherbi (1 year ago)
you are awesome, thank you
PSHARMA (1 year ago)
best
Filbert Tucio (1 year ago)
how can i horizontally align 2 images but 1 is on the left and the other on is on the center?
Lien Nayr Ripalda (1 year ago)
followed most of your video and man.. you're awesome! however, i got this huge problem. My elements are off every time I minimize my browser.. Can you help me pleaseeeeee?
Maxim Kotanov (1 year ago)
Why can't it possible to use negative percentages in absolute positioning example like the following: . containter {position: relative;} . box { position: absolute; left: 50%; top: 50%; margin-left: -50%; margin-top: -50%; } Why it doesn't work?
Sahil Chutani (1 year ago)
Great video bro helped me in my project 😎😎😎😎👍👍👍👏👏👏 Thanks dude
Arno Pisspot (1 year ago)
starts @0:31
Mirza Sisic (1 year ago)
See-ass-ass :P
Chemnitzel (1 year ago)
If I do this: .example .container position: relative .box position: absolute left: 50% top: 50% +transform(translate(-50%,-50%)) It gives me this: Invalid CSS after "...ate(-50%,-50%))": expected "{", was "" What is wrong?
Chemnitzel (1 year ago)
But still not workin :/
Chemnitzel (1 year ago)
Ah okay it has to be writen like: transform: { translate: -50%, -50%; }
Everest 76 (1 year ago)
We can just do : .box{ position:absolute; top:25%; left:25%; },and we get the same thing without margin-left or top -200px :/
Fade (1 year ago)
Yea... I thought that's what he was going to show when he first introduced the margins, but he didn't.
Human Error (1 year ago)
Hi! Great vid, in your absolute positioning negative margin-left can be also transform: translateX(-50%) Just wanna ask. Which may be a better hack?
Human Error (1 year ago)
My bad again, didn't see the last part. But still which is better? or maybe the best?
Human Error (1 year ago)
Oh my bad it's transform: translateX(-50%) translateY(-50%)
renewer (1 year ago)
So are semi colons not used in SASS?
renewer (1 year ago)
Thanks.
Neat Designs (1 year ago)
Yeah No semicolons and curly brackets..
Robert Neal (1 year ago)
Examples Time Slots: - absolute positioning w/ negative margins : 9:08 - 13:55 - Hey, guys feel free to ignore this it's just for me so I can remember when Travis talks about different things. I find I come back to this video every few months and it's annoying trying to find which example I'm looking for.
lex alex (1 year ago)
благодарю
Mo Ca (1 year ago)
At first I was like omg his voice is putting me to sleep. Meanwhile I have to say exceptionally smooooth voice mister. Really cool to listen to you. Thanks for sharing you knowledge...I really appreciate it. Peazze from Switzerland
_________ (1 year ago)
why would you center my mom with valium.wtf
Rajesh Sah (1 year ago)
Using flexbox you can also do the same thing anyway nice tutorial thanks devtips. display: flex; justify-content: center; /* align horizontal */ align-items: center; /* align vertical */ border: 1px solid green; width: 200px; height: 200px;
Dragon (1 year ago)
Can anyone tell me what the point of learning CSS and HTML is if we can use CMS's like word press and just click and drag everything?
Mauro angst (1 year ago)
You are driving me crazy (in a good way). I just wanted to see how to center things with css so I came here, and the pause the video and watched all your CSS and html5 basic series, and now that im back here I realize that you are using jade and sass instead of html and plain css, so I have to go and learn sass and jade first. I will learn A LOT today. Thank you.
Darrell San (4 months ago)
https://www.youtube.com/watch?v=ZohZS6xLYE4 Explains how to center an element within an element using vanilla CSS at about 8:25.
Elvis Skensberg (1 year ago)
how did you drag over the dom image at 12:05 ? :P
Jeremy Lindsay (1 year ago)
This video is blurry
Jannis Hinkelmann (1 year ago)
I rewatch this literally every time I have to center something. xD
Archibald Tuttle (1 year ago)
21st Century and centering something does still require such a brain fuck of coding!? Sad!
gdkksg (1 year ago)
hey i need help.. i was using your first technique to centlay align social media icons in the footer.. i was able to center them but it displays only 3 icons in one line and rest are shifted to the next line(also centrally aligned.) the icons are so small in size i am sure there is more than enough space for all of them to be displayed in same line but they just wont.... please someone help me..!!
Eliot Mason (1 year ago)
bourbon mixin transform is deprecated. Anyone know alternate syntax for this? Any chance we can get a comment in the video?
sumant kanala (1 year ago)
The last concept is intuitive and creative! Kudos to your videos man!!
Bogusky67 (1 year ago)
Centering horizontally AND vertically works also without bourbon like this: .box { margin: 0; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
Kevin DeLaune (1 year ago)
The major issue with many of your videos, is there isn't a CLEAR explanation of things from beginning to end. You start off with classes that already have styling, and us noobs aren't in the know. Clear explanation from beginning to end, with full details, would be helpful. Title "Centering with CSS" implies the video is targeted towards beginners. Also, beginners don't use SASS or LESS.
Kevin DeLaune (1 year ago)
Dude, you are blluuuurrrryyy
Kozi03 (1 year ago)
Thanks for more great vids! Have to say "It blew my mind grapes" had me in stiches
LayRain13 (1 year ago)
Omg thanks, i've been searching soooooooo long for this T_____T finally someone who's got a code that works in my case! THANKS :D
Ahmed Eid (1 year ago)
it'd be nice if u'd posted a repo/gist with code exmaples for reference .. thanks .
Andreea M (1 year ago)
Dude, the way you explain everything... is just gorgeous <3
deepak sonii (1 year ago)
Thanks men i love ur style. U can add one more in this is : Absolute position, top/bottom/right/left=0, then margin = auto;
Aditya Raj (1 year ago)
margin:0 auto; is only working when the width is specified. How to make it work without specifying the width of the container?
Mariela Napoles (1 year ago)
finally found what I need. thank you so much travis
Ankit Singh (1 year ago)
why margin: auto 0; doesn't work
Pratik Sharma (1 year ago)
hey Travis ! i have recently started watching your videos and I must tell you...Iam getting addicted to them... Great work...learned a lot
Panos Koutelis (1 year ago)
Travis! I have a brainfreeze question: How could I get the width of element in absolute positioning and then apply a -50% left and -50% top and reuse this block when we need to center? My best shot is that it requires some kind of function but I am learning Html and Css and have no clue about functions as of yet. Haha
Panos Koutelis (1 year ago)
Oh bourbon I just saw it! I have no clue what bourbon is but it does the job so ... Gief meh bourbonzzz!
Amit Kumar Jaiswal (1 year ago)
wow it is really Good Tutorial. i learn a lot form this tutorial and last one is really amazing. Thank you so match to create this video.
Adrian Thomas (1 year ago)
Could you make your example available in codepen?
Melody K (1 year ago)
Clever!!! ... Thanks!!!
Miron Swyst (1 year ago)
I see "." why are you not using brackets ?? { } ??
Stephen White (1 year ago)
Panos Koutelis I tried clicking on the "sass preprocessor" at the bottom. didn't work
Panos Koutelis (1 year ago)
Miron Swyst Travis is using a preprocessor called SASS that alters the syntax making it cleaner and has a lot of powerful tools if you wanna know more about it you should check <a href="http://sass-lang.com">Sass Preprocessor</a>
Facundo Corradini (1 year ago)
Awesome. Another ultra useful, trendy way of horizontal + vertical centering is using the flexbox. I'm sure he knows it by now, I'll just leave this here for the newcomers consideration: container{ display: flex; height: 100vh; /* Or whatever */ } box{ margin: auto; /* <- here lies the magic! with flexbox we can finally center vertically + horizontally with a simple "auto"! */ }
j Noah (9 months ago)
This really is so simple, a cavemen can do it!!! Definitely my favorite now...
Kozi03 (1 year ago)
Omg broke my website breaking free from bootstrap.. and have been tearing my hair out. Thank you!
ErmAKeef (1 year ago)
Finally learned how to center something with a width parameter, or inline-block selected
Andrei Marchenko (1 year ago)
Thanks for your videos, mate! Especially for CSS POSITIONING series ;) Could you tell me please what text editor you used on this video about centering with CSS? Best, Andrey.
Rahul Mahale (1 year ago)
Thanks man...!!!
Shikhar Mathur (1 year ago)
seriously hats off to you man. Few mins in the video and I can already see magic happening on my website for which I used to always wonder how to do. Thank you Sir.
Akira Razernite (1 year ago)
can you please do a video about white space, and how to get rid of it. for example the bottom white space, or the white space between divs on a Web page.
Akira Razernite (1 year ago)
<header><h1><h2><p><a></header> WHITE BACKGROUND SPACE HERE, BUT NEED TO CONNECT THE 2 DIVS <container><img><p></p> figured out the solution though
alergeo1 (1 year ago)
can you give an example code?
Akira Razernite (1 year ago)
Alex Machin the space between the nav div and the container div
Alex Machin (1 year ago)
Why get rid of white space.
Dzintars Klavins (1 year ago)
You are telling about centering with CSS. This is some basic thing for beginners. But at the same time You using Jade what is not beginners friendly. So, please, if You are making video for beginners auditory,t hen dont use advanced preprocessors. Show it in plain html/css.
oyun oynayan biri (4 months ago)
I agree too but it would be better to learn sass as early as possible because it is way better for most things But he did go overboard with the 4th way beacuse it uses a library type thing
nukitachan (6 months ago)
actually i followed some of his videos, I ended up using jade and sass without questioning, so I can do practical stuff even without understanding the basics. So in this case this video is very useful. I can understand exactly what i need to keep going on my project.
Joshua Baldwin (10 months ago)
Dzintars Klavins totally agree with you sir
Charaf B. (1 year ago)
your videos are amazing^^ thankyou
Renato Ruškan (2 years ago)
I don't know if someone else posted this, but there's one more trick for horizontal centering of absolute elements inside their relative parents: position: absolute; left: 0; right: 0; margin: 0 auto;
arshi (2 years ago)
Travis, cannot thank you enough for all the efforts that you've put into all your videos. Following them religiously. Here's an article I read, which also explains few more methods of centering, http://vanseodesign.com/css/vertical-centering/ Keep doing the good work, Travis #Lots of blessings from all your students!!! :D
MrRaitiz (2 years ago)
Is this now kinda obsolete, because of FlexBox?
Andreas Jørgensen (2 years ago)
How would you center align a link?
Andreas Jørgensen (2 years ago)
+DGramm16  +PoisonousBanana Thank you guys
DGramm16 (2 years ago)
If you want text align to work on an a tag you must define its width. a { text-align: center; width: 100%; } That should work
PoisonousBanana (2 years ago)
Andreas Jørgensen try a{ text-align: center; }
Andreas Jørgensen (2 years ago)
+PoisonousBanana doesnt work for me
PoisonousBanana (2 years ago)
Andreas Jørgensen a{ margin: auto; }
Driver0077 (2 years ago)
how about centering multiple images vertical 2 by 2?????????????
Victoria Alexis (1 year ago)
so a box?
Travis Adams (2 years ago)
Dafuq?
Santosh Kumar (2 years ago)
In the third example, is there any way to center without hard coding the width and height of the container? Like using calc() or something?
Santosh Kumar (2 years ago)
6:23 Can you explain me a bit how can we use it instead of floats? Both boxes are on the same row. With floats they could have been on a row. http://codepen.io/anon/pen/WGXkxN
Tobi (2 years ago)
You can't, they'll stay on their respective lines, having a display of block. Stick to floating where necessary.
Santosh Kumar (2 years ago)
Why the hell are you using jade and sass? You know it takes extra brain processing powers to decode that to HTML and CSS to us beginners?
Marcepanowy (1 year ago)
Omg how xd For me pug(jade) and sass is much better (im begginer) fe. more readable.
Jacob Morris (1 year ago)
Dude, let him do him remember just watch the beignner video
Vietnam (1 year ago)
Santosh Kumar instead of complaining, how about you just learn ahead of time?
Jaka Stavanja (1 year ago)
Using Less at work. Can't imagine working without it.
Chris Allure (2 years ago)
do you use github to work on all of your projects or something else maybe notepad?
PoisonousBanana (2 years ago)
Chris Allure He uses atom.io or codepin.io I recommend atom.io
StechGamer (2 years ago)
Next time get to the point, please.
Anna Drybulska (2 years ago)
would't be more DRY to use: .box { position: absolute; left: calc(50% - 300px); } will it do the same?
Animesh Kumar (2 years ago)
That last trick!! That was exactly what i was searching for. Thanks Trav...
Jason Moore (2 years ago)
I swear every time I search a problem I'm having with CSS or HTML on YouTube you always have a video addressing my EXACT problem. You're awesome!
DevTips (2 years ago)
That's fantastic!
Toby Chow (2 years ago)
What's the difference using top:0, left:0, right;0, bottom:0, margin:auto, position:absolute, for vertical and horizontal centering instead of your last example with translate?
Flash Light (2 years ago)
Just Amazing ......Solved my centering Problem in first 3 minutes......
Genius Bantoo (2 years ago)
Congratulations for 1Lakh+ subscribers.
stevenjchang (2 years ago)
how many times do i have to learn centering with css before i learn centering with css!!! thanks for the video though, will have to bookmark it for the next time i have to learn it :)
Angela Inniss (7 months ago)
lol same here why can't i just remember it ha
Gabriel Fiel (11 months ago)
Here I am again and again
Patrik Rikama (1 year ago)
Lemme see, 20 times and counting:)
Bernard (1 year ago)
same here. It's so frustrating googling it AGAIN! Lol. You' really think it would sink in eventually
Joe Porsche (1 year ago)
I feel the same
Tahoe Rock (2 years ago)
Hi Travis, I know this is pretty old smoke going here, but I'm in this positioning and I noticed, you do not have right Sass indention of the .container and .box class. So it is like a bit different, isn't it? I was watching it, doing it in my codepen It does not want to work the way you said. I hope I'm right :) Not skilled like you, but learning a lot from you. Thanks Tahoe Rock Here is a pen I did from your video: http://codepen.io/tahoerock/pen/AXwVzN Cheers TR
DevTips (2 years ago)
This is great! Thanks for sharing :)
Stan Gurule (2 years ago)
This is awesome! All your videos are excellent Bro. I was needing this one after working on a site trying to figure out why something wasn't centering correctly. Thank so much!
DevTips (2 years ago)
You are welcome!!
Tamas Zsebe (2 years ago)
Thanks for this awesome video! I have lost WAY too much time thinking I was "almost done for the day", only to be stuck on some stupid centering thing, searching stack overflow for things like "margin auto 0 not working" haha. :) Maybe I don't yet have a nuanced enough understanding of CSS and display/positioning, but in all the years of its existence, I'm astonished that they haven't yet implemented a basic, "horizontal-align-the-damn-contents-already: center" type attribute.
DevTips (2 years ago)
Centering was never easy. True true.
Tamas Zsebe (2 years ago)
haaaaa I just got to the FlexBox one. Well played, sir!
Tim Erwin (2 years ago)
this is actually a great video, loved the end scene lol
Ash B (2 years ago)
what about vertical-align: middle;?
DevTips (2 years ago)
that will do – sometimes :)
dekin phaisal (2 years ago)
i really like your tutorials very cool to understand, thank you for bein there for me
Yuraymar W. T. Stewart (2 years ago)
Hey man! Nice videos! I have a question, but let me explain my problem. I'm trying align center align numbers and text. So numbers about a description. 100 / vistors for example. These are max 3 digit values, but the values that contain the number "1" do not completely center align with the text underneath. Do you know how I could fix this?
900Hilton (2 years ago)
It would have helped immensely if you would have mentioned how you got the contents of the box on the page to begin with, and it would have been nice to actually see the html at the bottom to make more sense of this. It was useless to me.
Kwisatsoundman (2 years ago)
In fact, in each of these four examples, we start with the exact same original simple html setup: a little box (with a class of .box) inside of a bigger box (with a class of .container). Then, all the magic happens through the use of css. That's why our hero doesn't focuse on the html side of thing. But... if you want to understand each of these technics, you have to first learn the default behavior of every html component of a web page, before you can modify this behavior to your advantage. That's why this video is more suited to people who already master the basics of html and css. You have to walk before you can run.
Zoe D (2 years ago)
You da best, thanks.
DevTips (2 years ago)
Thanks Zoe :)

Would you like to comment?

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