Center content horizontally and vertically - CSS Tutorial

(futuristic sounds) - [Instructor] Alignment is a central feature of layouts. And working with web layouts, you often need to center one container inside another container either horizontally, vertically, or both. In this challenge, your goal is to center the inner element inside the outer one both horizontally and vertically as you see in this demo. Your solution must be responsive and to test it, change the size of the view port to ensure the inner element stays centered inside its parent container no matter what the view port width or height. In exercise files, you'll find the outer container with a class wrapper and the inner element with a class child and some basic styling. This is your starting point. Now you take on this challenge. Pause the video here, find your solution, then come back here and hit play to see how I solve the same challenge. (futuristic music) Here comes a solution. This challenge can be solved using either flex or grid. Your choice. Let's look at both solutions. We start out with the item up here in the top left hand corner. Using flex, I can now go to the wrapper. So the outer element and say display flex, and then justify and align the content inside. So I'll start by saying justify content center. I'll just save that show you what happens in the browser. Now the item is centered horizontally. Then I'll say align items center. Save again, go back in the browser and now the item is centered both horizontally and vertically. If you're using flex, that's all you need to do. But I said, you can also use grid to solve the same challenge. So let's do that as well. Going back into my code, I can change display flex to display grid instead, and save. Now you would think that this would produce the same results, but if I go back to the browser, you'll see we have vertical alignment, but not horizontal alignment. So what's going on here? It's because I'm using justify content. And in the context of grid, justify content is treated a little bit differently. It assumes that we have more than one piece of content and it's supposed to align or pack the items between each other. So if we're using grid, you need to change justify content to justify items. Save that, go back in the browser, and here the content is center aligned using grid. Now there's one more thing to this. You can also choose to have the item itself center itself. If we want to do that, you need to comment out these two here and then go down to the item and say justify self, center and align self, center. Save that, go back in the browser. And again, the item aligns itself and is center aligned. So now you have three different solutions to the same challenge.