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

Horizontal & Vertical Centering using CSS

602 ratings | 62527 views
A quick look at how horizontally and vertically center divs, or actually any kind of content, in HTML using CSS. This video is for beginners so I'll talk a bit about some concepts like cascading, blocks, and different values for the position attribute as we go along. 📣 Ask Me Anything https://app.scaleabout.com/christopherokhravi 💪 Patreon Community https://www.patreon.com/christopherokhravi 📚 Products I Recommend http://amazon.christopherokhravi.com 🎧 Audiobooks for the win http://audible.christopherokhravi.com/ ⭐️Donations BTC: bc1q4k330f3g0mjd70g8ws4zwxheu4ym065f8j8djh ETH: 0xa9342b308d480239d64c967bf7d53c4877474f25 LTC: ltc1q7ja5xvnkj32knp3mnhmgagdcwk8atevdswnft0 BCH: qqa8xpggmx68udkwjvpmmmv22rw6rx68p5ehe5rgmu ZEC: t1XyiVNTTEoSxWT8WdESwsUsp6fbySesYc2
Html code for embedding videos on your blog
Text Comments (68)
M Raiyan Nayeem (1 month ago)
There might be many videos regarding this topic, but the way you explained...that's amazing...and I have subscribed the channel
Ashukumar Morya (2 months ago)
Gábor Kákonyi (3 months ago)
Amazingly helpful even if CSS flex and grid solved theese problems, sometimes you have to use the "good" old methods.Thanks.
Niko 72nxt (4 months ago)
How to put hello on left and world in center in same line in html
Lenovo Genovia (5 months ago)
How to vertically center that text inside the box?
SomeGuy (7 months ago)
Alignment in css is a pain in the ass. This video helped me clear out a bunch of mistakes.
Gamal Abdall (8 months ago)
Thank you so much, you are a great instructor, and the subject was really important, but you well explained it. Thanks again.
Bonni Villaman (8 months ago)
No, this does not solve every possible scenario. If you have a div that wraps another two, and you want to center text in one of the other two that are in the wrapper, the text would go to the top of the screen since it is absolute. You have to try to show us how to center text in a div that is the child of another one.
Manish Kummar (8 months ago)
can u please help me out.
Manish Kummar (8 months ago)
hi i am facing more issue in vertical alignment in grid layout
Slađan Ćirić (11 months ago)
Thank you!
Shwibi Shrabs (1 year ago)
Great explanation and tutorial! Loved it, you are the first one who made me to subscribe and like without telling to like!
Shwibi Shrabs (1 year ago)
can you please make a video on how to vertically align the text of div element in middle of the div?
wanTED Talks (6 months ago)
Its easy bro, simply give relative position to parent and absolute position to text div and give it top 50% and left 50%, also martin-top and margin left half of actual container suppose if the div is of 200x60 then margin top will be -30px and margin left will be -100px for more see my channel video #wantedtalks
movieguy73 (1 year ago)
Christopher Okhravi (1 year ago)
popcorn hehe (1 year ago)
thanks alotttt!!
Christopher Okhravi (1 year ago)
And thank *you* for watching :)
XX yy (1 year ago)
Thank you so much, was one of the a few perfect lessons I got.
Mariana Carvalho (1 year ago)
Thank you for your videos Christopher. They are being very helpful!
Michael Vaughan (1 year ago)
could you use this to make 4 div boxes, 2 side by side by 2 above and below each other?
Shady Eita (1 year ago)
simple and great tutorial!
Christopher Okhravi (1 year ago)
Thanks :) I'm glad it's useful.
Kevin DeLaune (1 year ago)
Hmmm.... won't setting the body { text-align: center } cause ALL texts under the body to be aligned?
Hope Love (1 year ago)
Thanks this helped a lot
Eric The Red (1 year ago)
Just me or does it sound like this is narrated by Dinesh D'Souza?
Christopher Okhravi (1 year ago)
+Eric The Red I have no idea who that is but thank you I guess? :) :)
Its awesome... Its best one Thanks dude!
Ivan Zupancic (1 year ago)
this is da sh*t
nacr amri (1 year ago)
best best tutorial..!! this is what i was looking for thanks much..
Christopher Okhravi (1 year ago)
+Cheap Movies thanks. I'm glad to be of service :)
Jose Alcaraz (1 year ago)
best tutorial ever! very clear explanations!
Christopher Okhravi (1 year ago)
Thanks for the comment! I'm very glad it's clear :)
Melquidez Lazaro (1 year ago)
Awesome explanation, keep posting more like this thank you!
Christopher Okhravi (1 year ago)
Thanks. And thanks for pushing for more screencasts :) More will come.
Lon W. (2 years ago)
Excellent. Thanks for posting. Will use to set up an image gallery(6 img; 2rows like a table. Want it dynamic though. Am not sure howyet, but cannot afford PS and want a nice template for my own images.
Christopher Okhravi (2 years ago)
That actually sounds like a very good application for HTML, CSS and JS. I once designed a paper printed quiz using those tools instead of using Word/Pages/Illustrator/Photoshop etc. It's easier to get consistent layout with programming/markup languages rather than document processing applications :)
Daniel Kip (2 years ago)
What a pain it is to center with CSS. My god.
paul badulescu (4 months ago)
yes :////
Mitch Valdez (2 years ago)
when you use percentage on no specific height, can min-height work?
Mitch Valdez (2 years ago)
+Christopher Okhravi great, Thanks! :)
Mitch Valdez (2 years ago)
+Christopher Okhravi thanks for the reply, what I'm curious about is what if I used min-height:100% instead of height:100%? will the red background contain it's content like the text and not disappear? great video :)
Mitch Valdez (2 years ago)
+Christopher Okhravi thanks for the reply, what I'm curious about is what if I used min-height:100% instead of height:100%? will the red background contain it's content like the text and not disappear? great video :)
Mitch Valdez (2 years ago)
Adi Prasetya (2 years ago)
thank you for your great explanation,,, now i understand,,
Adi Prasetya (2 years ago)
sure,, id like to subscribe your chanel, and waiting for your next videos,, :)
Mario Aguilar (2 years ago)
Thank you Sr, From Mexico!!!
Vikram J (2 years ago)
thanks you
Vikram J (2 years ago)
thanks you just solved my problem  and one more request how to align  text and images one below the other ...   
Saurav Kumar (2 years ago)
I watched half a dozen videos on centering in CSS before stumbling on to this. You are a life-saver Mr. Okhravi. Give yourself a pat on the back.
Rikkles (2 years ago)
this video taught me more than just centering! thanks a lot!!
Georgi Georgiev (3 years ago)
Thank you very much. GOD bless you and keep you.
makedaevilmage (3 years ago)
You're a life saver! Was struggling with a <p> vertical align for some time now. I really appreciate the extra explanations :)
eevagirl (3 years ago)
Yes, thank you! (-:
rjtkoh (3 years ago)
You're a god damn champion. Have gone through about 5 videos and yours was the only one that worked best.
谢森正一 (3 years ago)
this video saved my life ... thank you
Luis Rodríguez (3 years ago)
Thank youu!!! Finally I got it
אליאב ממן (3 years ago)
very nice mate
Sitha Sek (3 years ago)
You are super!
a betts (4 years ago)
You're a far better presenter than a lot of webdev channels. Hope you do more. 
H. M. (4 years ago)
Combo Jerman (4 years ago)
DAMN! This is the most clear video which explain everything about divs, margin,% and px. CONGRATS !!!! REALLY EXTREMELY NICE VIDEO ³
Andre Cameron (4 years ago)
great work, please upload more tutorials
wklbryant98 (4 years ago)
thxs! really helped me a lot! Keep making videos, i might just be coming back for more:)
S A Bokhari (4 years ago)
Super cool presentation and understanding. Loving it. Please Publish more tutorial videos. People need this. Thank you for sharing. 
betocracks (4 years ago)
very well explained.. but it doenst works to me... but thanks for teh video.. nice try haha
y21 (1 year ago)
betocracks sorry 4 late answer, other libraries (like materialize) may harm your code so give your divs ids.
Gary Goodger (4 years ago)
Very well explained! Nice video :)

Would you like to comment?

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