From the course: Responsive Layout
Unlock the full course today
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.
Contents
-
-
-
-
-
-
-
(Locked)
Centering content1m 54s
-
(Locked)
3-column layout with grid areas, part 13m 33s
-
(Locked)
3-column layout with grid areas, part 24m 10s
-
(Locked)
3-column layout with flexbox3m 14s
-
(Locked)
12-column layout setup4m 7s
-
(Locked)
12-column layout for medium viewports3m 24s
-
(Locked)
12-column layout for wide viewports2m 58s
-
(Locked)
-