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

5 Ways to Center with CSS! [VOICE TUTORIAL]

224 ratings | 12949 views
Hey! In this video I show you 5 different and equally useful ways to center different types of content with CSS! Method #1 - 0:30 Written Like: display: block; margin: 0 auto; Description: This method of centering is by far the one that I use the most. It is a simple, reliable and more of all quick way to center any sort of content, not just text. Method #2 - 2:05 Written Like: display: flex; align-items: center; justify-content center; Description: The flex property is one of the lesser known CSS properties and I think this is down to it being really temperamental. It takes a little practice to get good at but when you do, it's super powerful and you'll use it everyday. It also allows you to center without defining the width of the content. Method #3 - 3:50 Written Like: position: absolute; left: 50%; transform: translate -50%, 0; Put the -50%, 0 in brackets. YouTube wouldn't let me. Description: This is probably my second or third favourite means of centering with CSS and it seems crazy that it was set up to work this way. By setting the left property to 50% and then using transform to drag the content back by 50% of it's own width, it allows for content to be centered every time. This can be used for more than just text also! Method #4 - 5:30 Written Like: Type center in angle brackets and close it off. Anything inside will be centered. YouTube won't let me type angle brackets here. Description: I would not recommend this for every piece of content that you need to be centered. It has known compatibility issues with older browsers and website tests will flag this as being outdated. It is good however if you're testing as it's quick, easy to write and remember and to be honest, it works! Method #5 - 6:45 Written Like: text-align: center; Description: This is pure and simple CSS. This method is limited to just text but it is easy to write and will center your text with just this one parameter! Website: www.marchinton.com Twitter: www.twitter.com/marchintonn Facebook: www.facebook.com/marchintondevelopment
Html code for embedding videos on your blog
Text Comments (26)
Explosive Landmine (3 months ago)
Love your vids brother glad I subbed:)
Marc Hinton (3 months ago)
Glad you enjoyed dude, I'm glad you subbed too :)
Ian Mayman (3 months ago)
I’ve watched a few videos on using CSS to centre and this I think is the clearest yet. The only improvement would be to demonstrate aligning a div inside another div, but this should be enough.
pebre79 (6 months ago)
Superb explanations. Thanks for taking time to make n upload!
verne robinson (1 year ago)
Too fast for you? - Mohit Manuja Carbstrong? You don't use the speed control in settings? Then I went to check out your CSS video. Oh...! Yes...this is way too fast for you.
BROKS (1 year ago)
What program do u use for your html, css, js etc?
Rick D (1 year ago)
Quick and to the point! Useful to know, but what method is used most often?
Elisabeth Koch (1 year ago)
Cool, thx.
mido5213 (2 years ago)
thanks man that was very quick and easy
why do you have to go at a breakneck speed ? who wants that ? yes we can pause the video and think ..but ideally when i watch i just wanna watch and not pause or rewind ...a pause ..is a silence which is golden .
Marc Hinton (5 months ago)
Matthew Lind  I'm a little late, but thank you Matthew!
Matthew Lind (1 year ago)
Here's a perspective for you. I want this speed because I have learned the basics, so what I need is a look into an expert's mind, which is what Marc is providing here. This tutorial isn't a "how to use CSS", it's a "how to do something specific in a few ways". Anyway, I totally understand where you are coming from, Mohit, and I really appreciate your content, Marc.
Marc Hinton (2 years ago)
My aim with these videos is to make them as short as possible. People don't tend to watch 30 minute videos to the end and I want everyone who sees this video to take away 100% of the knowledge that is presented in them. I totally 100% understand that these videos are fast-paced but as you said, you're free to pause it and comment as much as you want and I'll always answer any questions you might have! Thanks for your comment I appreciate it!
MotorCity Beats (2 years ago)
im too stupid to learn this
Marc Hinton (2 years ago)
You have the same mind set I had when I started. I had no idea how someone could do stuff like this, but if you love it, you have no idea how easy it is. How satisfying it is to see a problem and know the code the fix it! It's worth the countless hours of bug fixing and coming to the point of almost crying/punching your monitor because of a misplaced semi-colon! Message me on Facebook and we can talk the basics if you'd like!
Shlok Natarajan (2 years ago)
A speed recode of apple.com would be really sweet
Marc Hinton (5 months ago)
PS: I did end up doing this! https://www.youtube.com/watch?v=NghXYuhf0Ng
Marc Hinton (2 years ago)
You know what's weird, I was totally looking at that site a couple of days ago and thinking the same thing!
Azides (2 years ago)
Your CSS syntax is incorrect, one is supposed to write the class/id name and add a space between it and the opening bracket. Like this: .example { Instead of: .example{
Marc Hinton (2 years ago)
I agree, I should probably do that just for readability! I wouldn't however say it's "incorrect". Some people also type like: .example { text-align: center; } There are many ways to do things and as long as it works and others can read it, I say it doesn't matter! Thanks for your comment though dude, and for noticing something like that haha!
Krisan Alifari (2 years ago)
Finally, after 3 weeks.. I like it bro. Can you upload more tutorial about CSS?
Marc Hinton (2 years ago)
I do also attend college haah! - Thanks a lot for your comments dude!
Krisan Alifari (2 years ago)
+Marc Hinton Ohh I see, I thought you're college student hahaha. No problem bro. I'll wait for your next tutorials.
Marc Hinton (2 years ago)
Haha I know man. I have barely any free time between my job (I work as a Developer 40 hours a week), teaching Development on Skype and trying to maintain a social life hahah! Thanks for watching these videos though, I'm so glad people are enjoying them and learning from them. I have a lot more CSS videos planned, this series is called "A Beginner's Guide to Development" so I want our small community that we have here to all learn at the same rate so I can make videos that slowly become more complex, you get me? I might even upload another video tonight if I get time! If you have any questions or thoughts, message me on my Facebook page (link in the description) and I'll reply to you as quick as I can! Thanks for your comment dude! Have a great day.
toyodathon08 (2 years ago)
Your voice is smooth. Keep the vids coming
Marc Hinton (2 years ago)
Thanks a lot dude, I appreciate your comment and feedback. Would you mind dropping a like on this video? If so thanks again man! Much appreciated.

Would you like to comment?

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