Original subtitles

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 pagers were not centered and I found it really cool

that we could very easily center a page in a 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 indentation will automatically get fixed,

which is really, really helpful.

Then here, we need to give us 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'll see it that now the width of this element.

So this header here,

which is a child element of the container is

now only 702 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 a 600 pixels wide

or actually 700. So that's 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

this 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 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 than 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 us a safe , 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 and a half 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 the serie 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 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 revealing this and maybe revealing 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.