1
00:00:00,930 --> 00:00:02,700
Hello, everyone, and welcome back.

2
00:00:03,840 --> 00:00:10,020
In today's video, I will show you another way to align content in horizontal center, vertical center

3
00:00:10,140 --> 00:00:11,250
and center of the DIV.

4
00:00:11,700 --> 00:00:15,750
We will be using a combination of position, absolute and translate.

5
00:00:16,410 --> 00:00:17,340
So let's give it a try.

6
00:00:17,850 --> 00:00:18,890
Let's bring a barcoded.

7
00:00:19,860 --> 00:00:20,100
All right.

8
00:00:20,130 --> 00:00:24,090
Let's say we have to move this death in the center horizontally.

9
00:00:25,580 --> 00:00:34,070
So we could simply use position absolute on by default, it'll be relative to the main body now to move

10
00:00:34,070 --> 00:00:36,170
it to the center, we could do.

11
00:00:36,470 --> 00:00:36,950
Left.

12
00:00:38,750 --> 00:00:44,890
50 person, let's say there are now, as you can see, this is starting from the center of the screen,

13
00:00:45,200 --> 00:00:47,090
but it itself is not in the center.

14
00:00:47,660 --> 00:00:53,230
So for that, what we can do is we get translated towards the left by half of it with.

15
00:00:53,960 --> 00:00:55,460
So let's give that a try.

16
00:00:57,390 --> 00:01:01,470
So transform translate x.

17
00:01:02,560 --> 00:01:07,330
So to move it towards the left hand side, we can give a negative value C minus 50 percent.

18
00:01:08,350 --> 00:01:13,690
So this will move are different by 50 percent of the way towards the left.

19
00:01:13,870 --> 00:01:14,710
Let's say that.

20
00:01:15,740 --> 00:01:21,910
And as you can see now, our divers in the center of the screen horizontally similarly said you wanted

21
00:01:21,910 --> 00:01:24,010
to align it in the center vertically.

22
00:01:24,670 --> 00:01:26,350
So that's just common this.

23
00:01:27,820 --> 00:01:29,650
Let's say top 50 percent.

24
00:01:29,950 --> 00:01:30,650
Let's save it.

25
00:01:31,390 --> 00:01:32,590
Let's remove this margin.

26
00:01:33,350 --> 00:01:38,350
As you can see, our element is starting from the center of the screen vertically.

27
00:01:39,360 --> 00:01:43,200
So, again, to make it in the same two, we can translate our element.

28
00:01:43,590 --> 00:01:45,860
50 percent of the height towards the door.

29
00:01:46,680 --> 00:01:47,730
So let's try that.

30
00:01:48,120 --> 00:01:49,110
So transform.

31
00:01:50,450 --> 00:01:51,370
Translate why?

32
00:01:51,520 --> 00:01:52,890
And to move it towards the top.

33
00:01:52,910 --> 00:01:54,270
We can use a negative value.

34
00:01:54,780 --> 00:01:55,350
So negative.

35
00:01:55,380 --> 00:01:56,340
Fifteen percent.

36
00:01:57,030 --> 00:01:57,850
Fifty percent.

37
00:01:58,650 --> 00:01:59,340
Let's say that.

38
00:01:59,940 --> 00:02:02,390
Now, as you can see, it is in the center vertically.

39
00:02:03,110 --> 00:02:04,560
Now to move it in the center of their.

40
00:02:05,820 --> 00:02:07,300
We can use both the properties.

41
00:02:07,350 --> 00:02:08,850
If I just uncommon this.

42
00:02:09,730 --> 00:02:10,580
And savored.

43
00:02:11,450 --> 00:02:15,250
And as you can see, it is in the center horizontally, but not vertically.

44
00:02:15,940 --> 00:02:16,730
So why is that?

45
00:02:16,750 --> 00:02:21,110
Because this first transformed properties being overridden by the second one.

46
00:02:22,440 --> 00:02:24,970
Not to give, but we can give it like this.

47
00:02:25,330 --> 00:02:26,070
So translate.

48
00:02:26,110 --> 00:02:28,370
Why minus 50 percent?

49
00:02:29,470 --> 00:02:38,860
Or we could simply use translate an insight that we could do minus 50 percent on minus 50 percent.

50
00:02:40,310 --> 00:02:40,860
Let's save it.

51
00:02:41,690 --> 00:02:44,840
Now, as you can see, our element is in the center of the debate.

52
00:02:45,680 --> 00:02:52,130
And that's how you use position, absolute and transform to align content in the center.

53
00:02:52,580 --> 00:02:53,720
That's all for today, guys.

54
00:02:54,080 --> 00:02:56,270
If there is something that you did not understand.

55
00:02:56,390 --> 00:02:58,940
Feel free to drop a comment and we will discuss it.

56
00:02:59,360 --> 00:03:00,530
See you in the next video.

57
00:03:00,650 --> 00:03:01,020
Bye.

58
00:03:01,150 --> 00:03:01,790
And take care.