Horizontal & Vertical Centering using CSS

Подписаться 153 тыс.

Просмотров 92 тыс.

50% 1

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.
💪 Patreon Community
/ christopherokhravi
📚 Products I Recommend
geni.us/71ZXF

Опубликовано:

25 сен 2013

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 70

@sauravkumar17 8 лет назад

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.

@betts12220 9 лет назад

You're a far better presenter than a lot of webdev channels. Hope you do more.

@rjtkoh 9 лет назад

You're a god damn champion. Have gone through about 5 videos and yours was the only one that worked best.

@shahbokhari 10 лет назад

Super cool presentation and understanding. Loving it. Please Publish more tutorial videos. People need this. Thank you for sharing.

@rikkles 8 лет назад

this video taught me more than just centering! thanks a lot!!

@user-go8bw8sy1g 9 лет назад

this video saved my life ... thank you

@combojerman28 9 лет назад

DAMN! This is the most clear video which explain everything about divs, margin,% and px. CONGRATS !!!! REALLY EXTREMELY NICE VIDEO ³

@JustLookA7 6 лет назад

Alignment in css is a pain in the ass. This video helped me clear out a bunch of mistakes.

@mraiyannayeem3846 5 лет назад

There might be many videos regarding this topic, but the way you explained...that's amazing...and I have subscribed the channel

@ga7853 6 лет назад

Thank you so much, you are a great instructor, and the subject was really important, but you well explained it. Thanks again.

@marianacarvalho2097 7 лет назад

Thank you for your videos Christopher. They are being very helpful!

@shwibishwibi415 6 лет назад

Great explanation and tutorial! Loved it, you are the first one who made me to subscribe and like without telling to like!

@marioaguilar7373 8 лет назад

Thank you Sr, From Mexico!!!

@iamdanielkip 7 лет назад

What a pain it is to center with CSS. My god.

@paulbadulescu3269 6 лет назад

yes :////

@georgigeorgiev2219 8 лет назад

Thank you very much. GOD bless you and keep you.

@LuisRdzG10 9 лет назад

Thank youu!!! Finally I got it

@michaelvaughan2986 7 лет назад

could you use this to make 4 div boxes, 2 side by side by 2 above and below each other?

@melquidezlazaro10 7 лет назад

Awesome explanation, keep posting more like this thank you!

@ChristopherOkhravi 7 лет назад

Thanks. And thanks for pushing for more screencasts :) More will come.

@garygoodger 10 лет назад

Very well explained! Nice video :)

@Jose-oj7vt 7 лет назад

best tutorial ever! very clear explanations!

@ChristopherOkhravi 7 лет назад

Thanks for the comment! I'm very glad it's clear :)

@tieeieita2735 7 лет назад

simple and great tutorial!

@ChristopherOkhravi 7 лет назад

Thanks :) I'm glad it's useful.

@eliavmaman3203 9 лет назад

very nice mate

@nacramri6919 7 лет назад

best best tutorial..!! this is what i was looking for thanks much..

@ChristopherOkhravi 7 лет назад

+Cheap Movies thanks. I'm glad to be of service :)

@pradeepweb2005-OnlineTourGuide 7 лет назад

Its awesome... Its best one Thanks dude!

@hopelove3013 7 лет назад

Thanks this helped a lot

@lonw.7016 7 лет назад

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.

@ChristopherOkhravi 7 лет назад

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 :)

@Adiprasetya71 8 лет назад

thank you for your great explanation,,, now i understand,,

@Adiprasetya71 8 лет назад

sure,, id like to subscribe your chanel, and waiting for your next videos,, :)

@amongdoomers9464 3 года назад

display:flex; justify-content:center; align-items:center;

@slaanciric3888 6 лет назад

Thank you!

@ioriyagami1088 6 лет назад

thanks alotttt!!

@ChristopherOkhravi 6 лет назад

And thank *you* for watching :)

@makedaevilmage 9 лет назад

You're a life saver! Was struggling with a vertical align for some time now. I really appreciate the extra explanations :)

@LoLKuR3 9 лет назад

Subscribed.

@manishkummar8867 6 лет назад

hi i am facing more issue in vertical alignment in grid layout

@SithaSek 9 лет назад

You are super!

@eevagirl 9 лет назад

Yes, thank you! (-:

@satellitesage2487 6 лет назад

How to vertically center that text inside the box?

@vikramj4387 8 лет назад

thanks you

@vikramj4387 8 лет назад

thanks you just solved my problem and one more request how to align text and images one below the other ...

@shwibishwibi415 6 лет назад

can you please make a video on how to vertically align the text of div element in middle of the div?

@FrontendZilla 6 лет назад

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

@mitchvaldez7878 8 лет назад

when you use percentage on no specific height, can min-height work?

@mitchvaldez7878 8 лет назад

*with

@mitchvaldez7878 8 лет назад

+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 :)

@mitchvaldez7878 8 лет назад

+Christopher Okhravi great, Thanks! :)

@movieguy7398 6 лет назад

#mindblown

@ChristopherOkhravi 6 лет назад

@francoismienie8502 4 года назад

Flexbox!!!!!

@ChristopherOkhravi 4 года назад

Indeed! But this was recorded a loong time ago 😊😊😊

@francoismienie8502 4 года назад

@@ChristopherOkhravi I am busy looking at your Design patterns videos, do you have something on Repository Pattern? Thanks

@MrRetroVinyls 3 года назад

@manishkummar8867 6 лет назад

can u please help me out.

@IvanZupancic 7 лет назад

this is da sh*t

@bonnivillaman6156 6 лет назад

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.