Centering Elements with Flexbox

 

CORE CONCEPTS

CORE CONCEPTS

New

The Box Model

The Box Model

New

1:54

Intro to Web Layout

Intro to Web Layout

New

2:27

Display Settings

Display Settings

New

2:54

Padding & Margin

Padding & Margin

New

2:48

Width & Height Units

Width & Height Units

New

3:59

Floats & Clears

Floats & Clears

New

1:52

Flexbox & Grid

Flexbox & Grid

New

Intro to Flexbox

Intro to Flexbox

New

2:27

Centering Elements with Flexbox

Centering Elements with Flexbox

New

1:20

Equal Height Layouts with Flexbox

Equal Height Layouts with Flexbox

New

1:47

Grid layouts overview

Grid layouts overview

New

4:18

Flexbox vs. Grid

Flexbox vs. Grid

New

4:00

Advanced Layout

Advanced Layout

New

Positioning Overview

Positioning Overview

New

1:48

Relative Positioning

Relative Positioning

New

1:43

Absolute Positioning

Absolute Positioning

New

1:43

Fixed Positioning

Fixed Positioning

New

1:27

Z-Index

Z-Index

New

1:49

Overflow

Overflow

New

1:49

new course
CSS grid landing page tutorial (36min)

Lesson info

Lesson info

Centering elements vertically used to be a challenge in web design, until flexbox arrived on the scene. With flexbox it’s easy to center any element(s) vertically in its parent element. In this video, we'll show you how to use flexbox to center one or more elements. In these examples, the parent element has been set to a height of 100vh, which is 100% of the viewport height, so the items are centered relative to the viewport, as well as to their parent containers.

Explore this project

Want to dig into the project featured in this video and see how everything is put together? We've included the full project we used when making this lesson, and we've shared the link right under this very paragraph.

View and clone this projectDownload lesson assets
Clone this projectDownload project assets

Transcript

Until recently, vertically centering a child element inside a parent element required absolute positioning, transforming along the y-axis, and a graduate degree in materials engineering. With Flexbox, centering is straightforward and highly effective.

We'll do this with a single element, then we'll do it again with multiple elements, then we'll do it yet again with a single element containing multiple elements.

Let's do it with a single element. Super simple. Now in all these examples, we’re using Sections with set heights, so that we can demonstrate vertically centering flex items. Let’s go to our asset manager, and drag in an image. All we have to do is select the section, set it to flex, and justify and align to center. That’s literally it; there’s nothing else.

Let's talk multiple elements. Here are some div blocks in a section. We use our flex layout options to control whether we're horizontally or vertically displaying our flex items. And to center them, we just click to center them.

That's multiple elements.

Let's do a single element containing multiple elements. This is common with sections and containers. Say we want to center our container (which contains a ton of content) inside our section. Okay. Select the section, we're setting it to flex. And we justify and align to center. That's it.

So, three examples, that's centering using Flexbox.