Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

CSS Flexbox Layout

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Vertical and Horizontal Centering

4:14 with Guil Hernandez

Centering content is one of the trickiest and more difficult things to do in CSS layout when using properties like float, display or position. In this video, you'll learn why flexbox is the smartest solution when it comes to centering content.

Resources

Three ways to center-align elements using flexbox

Set the flex container's justify-content and align-items values to center:

.container {
  justify-content: center;
  align-items: center;
}

Set the flex container's justify-content value to center, while setting the flex item's align-self value to center:

.container {
  justify-content: center;
}
.item {
  align-self: center;
}

Set the flex item's margin value to auto: 

.item {
  margin: auto;
}

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    Centering content is one of the trickiest and 0:00
    more difficult things to do in CSS layout. 0:02
    Even vertical centering and centering elements perfectly inside fluid containers 0:04
    are things web designers and developers usually struggle with 0:09
    when using layout properties like float, display, or position. 0:12
    By now, you've seen that you can align content vertically or 0:17
    horizontally quite painlessly using Flexbox properties like align-items, 0:20
    align-self and justify-content. 0:24
    So in this video, I'll show you why Flexbox is the smartest solution 0:28
    when it comes to centering content. 0:32
    You can follow along using the latest workspace, 0:34
    by launching the workspace on this page. 0:37
    In the index.html file, we still have the same flex container div, 0:39
    but this time there's only one flex item inside. 0:45
    The flex container has a fluid min height of 50vh. 0:50
    This means that the container's height will always take up 0:56
    half the viewport height as you can see here in the preview. 0:59
    Now, I want to align the flex item so 1:03
    that it's positioned perfectly in the center of the container. 1:05
    So there are three different ways I can center this item using Flexbox. 1:10
    First, I can set container's justify-content and align-items values to center. 1:15
    I can also set container's justify-content value to center, 1:21
    while setting the item's align-self value to center, or 1:25
    I can simply set the item's margin value to auto. 1:29
    So, let's take a look at these three options. 1:33
    Back inside flexbox.css, I'll start by adding a justify-content 1:35
    property inside the container rule and setting the value to center. 1:41
    Now right below the justify-content property, 1:47
    I'll add the align-items property and set the value to center as well. 1:50
    With these two declarations, 1:58
    the item displays perfectly centered inside the container. 1:59
    Back in my style sheet, I can also target the item and center align 2:06
    it on the cross axis using the align-self property and the value center. 2:11
    So now, I can remove the align-items property from the container rule, 2:19
    and when I refresh the browser, we can see that the result is the same, 2:24
    still positioned perfectly in the center, no matter the container's width and height. 2:28
    So by now, you know that a margin value of auto has a significant effect on flex 2:33
    items, because the value auto will absorb any extra space around a flex item. 2:38
    So if I use a margin on the flex item, 2:45
    I don't even need to include a justify-content or align-self property. 2:48
    So I'll remove the justify-content declaration from the container rule and 2:53
    in the item rule I'll delete the align-self declaration. 2:58
    And now I can simply set the item's margin value to auto and the browser 3:02
    automatically inserts the extra space on all four sides of the flex item. 3:09
    So there you have it, perfect horizontal and vertical centering. 3:14
    Now, there's no right or wrong solution here as each method does the trick 3:18
    the method you use to center content is up to you. 3:23
    You learned a whole lot more about Flexbox in this section of the course, 3:27
    we even went over some ideas on how you can use these features in your projects. 3:30
    You should feel like you've gained a new CSS layout super power, 3:34
    because now you have the tools necessary to build websites using Flexbox. 3:37
    So, well done. 3:41
    As I'm recording this video, Flexbox is supported in every modern browser 3:43
    with a few known issues in Chrome, Safari, Firefox, and Internet Explorer. 3:47
    IE10 has partial support for Flexbox and 3:52
    older versions of Internet Explorer like IE9 do not support Flexbox. 3:55
    So before using Flexbox in your projects, be sure to check a resource like, 4:00
    caniuseit.com to see the latest in browser support. 4:04
    Coming up in the next section, 4:08
    you're going to use your new Flexbox skills to build a responsive webpage. 4:09
    See you then. 4:13

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up