From the course: Responsive Layout
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Centering content
- [Instructor] Until recently, it was incredibly difficult to vertically center something with CSS, but as you've seen with both Grid and Flexbox, you can easily center an element within another element. Here's an overview of two ways to center an element. To start out, we have a div inside another div, and I've given them both height and width. To center with Flexbox, first we're going to give the container a display of flex, so I'm going into the code on line nine, container display: flex; save and refresh, nothing's happened yet. Next we're going to use justify-content to center it horizontally, justify-content: center; save, and refresh, now it's in the middle horizontally, and then we can use align-items to center it vertically, align-items: center; save, and refresh, now we have an item centered within another element both horizontally and vertically. You can do the same thing with Grid, but with slightly different properties. I'm going to take out all of those properties I just…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.