-: One of the very first tricks that I learned
with CSS was how to center a page inside of the browser.
So back in the day, many pages were not centered,
and I found it really cool
that we could very easily center a page
in the browser using a very simple trick.
And so let me now share that really nice trick
with you in this video.
Now, the very first thing that we need to do
in order to pull off this trick is to put all
of our content into a container element,
because otherwise if we don't do that,
then what is there actually to center in the window?
So what I mean is that right now
as we keep resizing the browser window
all of the content actually stretches
from one side to the other.
So there is no content there to center
in the center of the browser, right?
So we first need a container,
and that container then needs a certain width.
So let's put all of this into a box.
And this box doesn't need to have any special meaning.
So we don't need a semantic html element here.
And so we can simply use a div element.
Now this one should not close here,
but it should close right before the end of the body.
So it starts right there
and we close it only here after the footer.
And now as I save it,
all the indentation should automatically get fixed,
and it did.
Nice.
So this is a really nice thing about Prettier.
So when we keep adding other elements
then all the annotation will automatically get fixed
which is really, really helpful.
Then here we need to give this a name
and I like to use the name of "container".
Let's copy that class, and style it here.
And as I was saying
now we actually need to give this container a width
because otherwise there is not really anything to center.
So let's start with 700 pixels,
and I'll make it a bit wider later.
Okay, so we have this width of 700 pixels now.
So you see that now the width of this element
so this header here, which is a child element
of the container, is now only 700 to pixels as well.
So again, this div here has a width of 700,
so we can see that here.
And so now the child elements which are inside
of it can of course not be bigger than that.
So they can only be as large as the container element.
And so therefore this one is also 600px wide
or actually 700.
So that 620 plus 40 plus 40, okay?
So this has nothing to do, like, with inheritance
or something like that.
Instead, it is simply the logic
that the child element can never be wider
than the parent element.
And so if the parent element is 700
then all the others are going to be 700 as well.
So this one for example is 700 and the H2 as well
and so on and so forth.
Right.
The same here goes for the image of course
which is 100% of the parent.
And so now as we keep making this bigger
these 700 pixel container here always keep staying
on the left side.
And so now as a final step
we need to center this container element
inside of the browser.
And so that is the actual trick.
So giving the container a width is part one.
And now part two is to add some margins
to the left and to the right of the container.
So we can say margin left and then set it to auto,
which stands for automatic.
And margin to the right also automatic.
So what this means is that the margin on the left
needs to be the same,
then the margin on the right side
and they should both be calculated automatically
by the browser.
And so therefore this will mean that there will be a margin
on the left and on the right which will be exactly
the same size, and therefore as a result
the container will look centered inside of the body.
So basically inside of the browser.
So if we give this a save, then it does actually work.
Great.
This is fantastic.
So as we resize,
let's see then the margin on the left and on the right
keep growing and they keep giving us basically
this illusion that the page is completely centered so
that the container is centered.
So if I inspect this now and go to the container
then here I can see that the margin is right now
180 on both sides.
And if I resize this
then you see that now it is only for example
72.5 on each side.
So again, it is the same on both sides
because it is auto on both sides.
And auto means that the browser
will automatically figure out the width.
Okay.
Now here actually I want this to be 800 pixels,
but I put it a bit smaller before
because if we then put it like this
we can actually not not see anything.
So it doesn't look centered.
But of course if we keep growing the window
then now this entire column is nicely centered.
Right.
So this is a really great trick,
and I remember back in the day, like way over 15 years ago
I was really happy when I discovered this trick.
Now, just to finish
we can also write this here as a shorthand, once again,
which is actually even more common.
So the margin at the top and the bottom right now is zero
and left and right is auto.
And so that is the second value of the shorthand.
So we can get rid of this
and there we go, let's test it again.
And indeed, it had to work the same.
Right.
And with this, we finished this nice trick
and also actually we finished this part
of the section about the box model.
And so what this means is that we are now ready
for the next part of the coding challenge.
So after reviewing this
and maybe reviewing this entire file, so how it looks
like right now after this part of the section.
So once you're done doing that,
then let's move on to the next video
and start our next coding challenge.
So see you there.