4.1 Vertically and Horizontally Centered
There’s nothing particularly impressive about horizontally centering your content; you’ve been doing it for years. But what about vertically centering your variable-height content? In this lesson, you’ll learn how Flexbox tackles this problem with minimal effort.
1.Introduction1 lesson, 00:39
2.Project 1: Flexbox Menu2 lessons, 11:59
3.Project 2: Complex Layouts2 lessons, 12:16
4.Project 3: Banner With Centered Content1 lesson, 07:25
5.Project 4: Ordered Content1 lesson, 05:23
6.Project 5: Image Grid2 lessons, 10:03
7.Project 6: Uneven Image Grids2 lessons, 12:39
8.Bonus Project 1: Flexbox Modal2 lessons, 11:58
9.Bonus Project 2: Flexbox Content Slider1 lesson, 12:49
10.Conclusion1 lesson, 00:38
4.1 Vertically and Horizontally Centered
Hello and welcome back. In this lesson I wanna show you just how easy it is using the Flexbox model to horizontally and vertically center any piece of content that you want to center. But before we talk about that, let me show you the old way that I used to do it. So I've got a code pen open. And you can find the URL for that in your course notes for this particular lesson. Once we've got that opened up, we're gonna click on Fork to open a new copy. And we'll make our changes to this new copy. So, what we've got here is a banner, all of it's contained in a div with a class of banner. Inside that we have another div with a class of banner text. And then we have an h1, h3, and h6 element here that contains all of our text. So all three of those text elements are contained within this div that has a class of banner text. And then inside our CSS, we've set up the banner. If we jump down to the banner class, we've set our text color to white. We've created a background image here. We've positioned it, and sized it, and set its height to 300 pixels. And we've applied some styles to the three text elements that are inside our banner, our H1, H3, and H6. We've set the margins to zero so that they're nice and snug right next to each other, and we've set a text shadow behind that text. And then there are other rules as well that you can look through. But what I wanna show you at this point is the way that I used to vertically and horizontally align our text. Now horizontally aligning our text isn't anything original, it's very easy to do, that's not the hard part. So we could just go into this rule for our three headings, h1, h3, and h6, inside our banner and simply set the text align to center. That part is the easy part, the hard part is vertically centering our text. Now if you just have one line of text, you can easily vertically center it by setting the line height to be the same height as the container. So our container is the banner itself which is 300 pixels tall, so if we only had one line of text we could set our line height to 300 pixels and that text would be vertically centered. But what if you have several lines of text? What if you have a paragraph of text? What if you have a mixture of text and images and you want a whole block of content to be vertically centered? Well, the way I used to do it is just to eyeball it. So I would take our banner text here, so all of this is contained again if we look at our HTML inside this div with a class of banner-text. So, we could go back into our CSS and create a new rule for .banner-text and we can play with it a little bit. Maybe set our top margin or margin top property to 40 pixels, and that nudges it down a little bit and that's actually nudging down the banner itself. So that's not exactly what we want. So instead of margin let's change that to padding and usually that takes care of the issue, and there we go. So our banner has been moved back up and our text has been moved down, but it's not down quite far enough. So we'll play with it a little bit more, maybe 60, and there we go. So you could play around with those numbers until you get it good enough. But flexbox allows us to vertically center our text much much more easily than the old fashioned way. And the old fashioned way is not always reliable because what if somebody overrides your styles, overrides your text sizes, to the point where it's not centered anymore. You don't have full control over it that way. So again we can fix that by using the Flexbox model. And when we use the Flexbox model we don't even need a rule for the banner text class. All we need to do is we need to deal with the flex container, which is going to be our banner class. The banner class represents the div that is the parent of that text. So inside the rule for the banner class, we're gonna set our display here to flex. And initially that's not gonna do anything for us except it's going to ruin our centered text. So this Text-align: center is no longer doing anything for us. Excuse me. So let's just get rid of that. And then inside our banner rule, after display: flex let's do a couple more things. Now we've talked before about using the justify content property to align the flex items within a flex container. And we've used it before to space a series of items out so that there's equal amounts of space in between them. Well remember, we talked about another value for that justify content property. So let's just type that out, justify-content, and we have another value here called center. So that's how we're going to horizontally center everything. And we might want to go ahead and add our text align center back to our H1, H3 and H6 tags. Cuz you can see that it's not perfectly centered over here on the right. So we can go back into that particular rule and turn it back on, textalign: center. And that nudges things over so that it is perfectly centered. And then the last thing we need to do is figure out how to center things vertically. So we can align items along the main axis using justify-content. But we can align items along the cross axis using another property called align-items. And we can use the same values here, so by default it's set to a value of Flex-start which the cross axis. Since we're using a row instead of a column, the cross axis is the up and down or vertical axis, so flex start is gonna be at the top. If we changed it to Flex-end, it would be at the bottom. We can also use space between and space around if we had multiple items, which we don't here. But we also have access to the same value of center, which will vertically center our text. So, again this align-items property is the exact same thing as the justify-content property, but it goes along the cross axis instead of the main axis. And again just to review, I know I'm being repetitive here but I want to make sure we understand this. When we create a flex container using display: flex, by default it is set to a row instead of a column, so that our main axis is our horizontal axis. So the justify-content which is gonna go along our horizontal axis. If we set that to center, it will center things horizontally. The align-items property goes along the cross axis which is gonna be, in this case, the vertical axis. And so when we set the property to center there, it's going to center along the vertical axis. So hopefully that made sense. Make sure you save your work. And then I'll see you in the next lesson. Thank you for watching.