Easy way to center div inside another div using margin: 0 auto;
Thanx for watching, your comments are welcome.
► Get Filip a coffee so he can work longer at night :)
[ Ссылка ]
► LET'S CONNECT:
Facebook: [ Ссылка ]
Linkedin: [ Ссылка ]
#divinsidediv
#csstutorial
Project Resources
-----------------------------------------------------------------------------------------------------------
[ Ссылка ]
Tools
-----------------------------------------------------------------------------------------------------------
Brackets, FREE code editor
[ Ссылка ]
Emmet, super speed coding addon
[ Ссылка ]
Beautify, turning your ugly code into beautiful script
[ Ссылка ]
Transcription
-----------------------------------------------------------------------------------------------------------
Hi guys and welcome to another tutorial about how to center a div within another div. It’s called Divception. Let's make some divs. Let’s make outer div and inner div. With class, we can add class outer div, and inside this div let’s make the inner div. Inner div and outer div, ok, both are here. Now we move to style. Css to make, to see these, to see those divs. Outer div, we can say it’s, it has height of 400 pixels, and of course width, same all, 400 pixels. Ok? You can see this div. I prepared some, I prepare some styling so we don’t have to write. Ok, we have our div with a color, let’s say little grey. Ok, this is our outer div. You can see, you can see it here, and let’s make our inner div. You just copy this, and paste this. And make sid this is inner div, and let’s make some adjustments, smaller, and color to be white, so we can see the differences. Ok, we have now, we have our divs on page so, let’s apply again some magic of CSS, let’s center this inner div inside this outer div. Just add margin 0 auto, and we have inner div inside this outer div. OOK, but we want also to center our outer div, so we also add margin 0 auto on the outer div. And that’s it guys, this is very simple method, and don’t forget the width, if you don’t have width, you can, of course center, as you can see. Nothing happens, and just to reverse into previous state. I prepared zip file for this project in the description, so don’t be afraid to download and play, play with it. It is pretty simple, pretty straightforward, pretty rudiment, so learn it and stay good, and. E, one thing, don’t forget, I write this code like a prehistorian, so don’t be like me, or be like me and use the beautify addon for brackets code editor I use. Just click beautify, and have beautified, the beauty code, the miss of code. Miss of brackets 2016. That is from me guys, and you have everything you need to know in extras in description, be sure to subscribe, like, and see you on the next, in the next tutorial where we will center a div in the div using display inline-block CSS, so be good and bye bye.
