Hello, everyone, and welcome back.
In today's video, I will show you another way to align content in horizontal center, vertical center
and center of the DIV.
We will be using a combination of position, absolute and translate.
So let's give it a try.
Let's bring a barcoded.
All right.
Let's say we have to move this death in the center horizontally.
So we could simply use position absolute on by default, it'll be relative to the main body now to move
it to the center, we could do.
Left.
50 person, let's say there are now, as you can see, this is starting from the center of the screen,
but it itself is not in the center.
So for that, what we can do is we get translated towards the left by half of it with.
So let's give that a try.
So transform translate x.
So to move it towards the left hand side, we can give a negative value C minus 50 percent.
So this will move are different by 50 percent of the way towards the left.
Let's say that.
And as you can see now, our divers in the center of the screen horizontally similarly said you wanted
to align it in the center vertically.
So that's just common this.
Let's say top 50 percent.
Let's save it.
Let's remove this margin.
As you can see, our element is starting from the center of the screen vertically.
So, again, to make it in the same two, we can translate our element.
50 percent of the height towards the door.
So let's try that.
So transform.
Translate why?
And to move it towards the top.
We can use a negative value.
So negative.
Fifteen percent.
Fifty percent.
Let's say that.
Now, as you can see, it is in the center vertically.
Now to move it in the center of their.
We can use both the properties.
If I just uncommon this.
And savored.
And as you can see, it is in the center horizontally, but not vertically.
So why is that?
Because this first transformed properties being overridden by the second one.
Not to give, but we can give it like this.
So translate.
Why minus 50 percent?
Or we could simply use translate an insight that we could do minus 50 percent on minus 50 percent.
Let's save it.
Now, as you can see, our element is in the center of the debate.
And that's how you use position, absolute and transform to align content in the center.
That's all for today, guys.
If there is something that you did not understand.
Feel free to drop a comment and we will discuss it.
See you in the next video.
Bye.
And take care.