1
00:00:00,280 --> 00:00:02,490
Centering content is one
of the trickiest and

2
00:00:02,490 --> 00:00:04,920
more difficult things to do in CSS layout.

3
00:00:04,920 --> 00:00:09,170
Even vertical centering and centering
elements perfectly inside fluid containers

4
00:00:09,170 --> 00:00:12,230
are things web designers and
developers usually struggle with

5
00:00:12,230 --> 00:00:15,570
when using layout properties like float,
display, or position.

6
00:00:17,240 --> 00:00:20,300
By now, you've seen that you
can align content vertically or

7
00:00:20,300 --> 00:00:24,910
horizontally quite painlessly using
Flexbox properties like align-items,

8
00:00:24,910 --> 00:00:28,030
align-self and justify-content.

9
00:00:28,030 --> 00:00:32,200
So in this video, I'll show you why
Flexbox is the smartest solution

10
00:00:32,200 --> 00:00:34,790
when it comes to centering content.

11
00:00:34,790 --> 00:00:37,460
You can follow along using
the latest workspace,

12
00:00:37,460 --> 00:00:39,376
by launching the workspace on this page.

13
00:00:39,376 --> 00:00:45,260
In the index.html file,
we still have the same flex container div,

14
00:00:45,260 --> 00:00:48,930
but this time there's only
one flex item inside.

15
00:00:50,220 --> 00:00:56,010
The flex container has
a fluid min height of 50vh.

16
00:00:56,010 --> 00:00:59,060
This means that the container's
height will always take up

17
00:00:59,060 --> 00:01:03,220
half the viewport height as you
can see here in the preview.

18
00:01:03,220 --> 00:01:05,820
Now, I want to align the flex item so

19
00:01:05,820 --> 00:01:09,180
that it's positioned perfectly
in the center of the container.

20
00:01:10,330 --> 00:01:15,050
So there are three different ways I
can center this item using Flexbox.

21
00:01:15,050 --> 00:01:21,200
First, I can set container's justify-content 
and align-items values to center.

22
00:01:21,200 --> 00:01:25,640
I can also set container's 
justify-content value to center,

23
00:01:25,640 --> 00:01:29,990
while setting the item's 
align-self value to center, or

24
00:01:29,990 --> 00:01:33,490
I can simply set the item's
margin value to auto.

25
00:01:33,490 --> 00:01:35,418
So, let's take a look
at these three options.

26
00:01:35,418 --> 00:01:41,760
Back inside flexbox.css,
I'll start by adding a justify-content

27
00:01:41,760 --> 00:01:47,270
property inside the container rule and
setting the value to center.

28
00:01:47,270 --> 00:01:50,598
Now right below
the justify-content property,

29
00:01:50,598 --> 00:01:55,590
I'll add the align-items property and
set the value to center as well.

30
00:01:58,170 --> 00:01:59,997
With these two declarations,

31
00:01:59,997 --> 00:02:03,660
the item displays perfectly
centered inside the container.

32
00:02:06,680 --> 00:02:11,918
Back in my style sheet, I can also
target the item and center align

33
00:02:11,918 --> 00:02:17,840
it on the cross axis using the align-self
property and the value center.

34
00:02:19,150 --> 00:02:24,400
So now, I can remove the align-items
property from the container rule,

35
00:02:24,400 --> 00:02:28,550
and when I refresh the browser,
we can see that the result is the same,

36
00:02:28,550 --> 00:02:33,960
still positioned perfectly in the center,
no matter the container's width and height.

37
00:02:33,960 --> 00:02:38,850
So by now, you know that a margin value
of auto has a significant effect on flex

38
00:02:38,850 --> 00:02:45,520
items, because the value auto will absorb
any extra space around a flex item.

39
00:02:45,520 --> 00:02:48,890
So if I use a margin on the flex item,

40
00:02:48,890 --> 00:02:53,540
I don't even need to include a justify-content 
or align-self property.

41
00:02:53,540 --> 00:02:58,780
So I'll remove the justify-content
declaration from the container rule and

42
00:02:58,780 --> 00:03:02,750
in the item rule I'll delete
the align-self declaration.

43
00:03:02,750 --> 00:03:09,900
And now I can simply set the item's
margin value to auto and the browser

44
00:03:09,900 --> 00:03:14,970
automatically inserts the extra space
on all four sides of the flex item.

45
00:03:14,970 --> 00:03:18,850
So there you have it,
perfect horizontal and vertical centering.

46
00:03:18,850 --> 00:03:23,240
Now, there's no right or wrong solution
here as each method does the trick

47
00:03:23,240 --> 00:03:25,920
the method you use to center
content is up to you.

48
00:03:27,300 --> 00:03:30,720
You learned a whole lot more about
Flexbox in this section of the course,

49
00:03:30,720 --> 00:03:34,060
we even went over some ideas on how you
can use these features in your projects.

50
00:03:34,060 --> 00:03:37,450
You should feel like you've gained
a new CSS layout super power,

51
00:03:37,450 --> 00:03:41,430
because now you have the tools necessary
to build websites using Flexbox.

52
00:03:41,430 --> 00:03:43,240
So, well done.

53
00:03:43,240 --> 00:03:47,400
As I'm recording this video, Flexbox
is supported in every modern browser

54
00:03:47,400 --> 00:03:52,630
with a few known issues in Chrome,
Safari, Firefox, and Internet Explorer.

55
00:03:52,630 --> 00:03:55,600
IE10 has partial support for Flexbox and

56
00:03:55,600 --> 00:03:59,455
older versions of Internet Explorer
like IE9 do not support Flexbox.

57
00:04:00,810 --> 00:04:04,635
So before using Flexbox in your projects,
be sure to check a resource like,

58
00:04:04,635 --> 00:04:08,330
caniuseit.com to see
the latest in browser support.

59
00:04:08,330 --> 00:04:09,450
Coming up in the next section,

60
00:04:09,450 --> 00:04:13,070
you're going to use your new Flexbox
skills to build a responsive webpage.

61
00:04:13,070 --> 00:04:13,930
See you then.