← Back to Gists

Flexbox centering

📝 CSS
pjenkins98
pjenkins98 · Level 3 ·

Easily center any element both horizontally and vertically using Flexbox with just three lines of CSS.

CSS 
.parent { display: flex; justify-content: center; align-items: center;
}

Comments

2
plopez204 plopez204

hey @astewart981 that's the classic, works every time. though i usually toss in min-height: 100vh if i want it centered in the viewport too.

1
clintonv clintonv

Have @tracy_jackson you run into issues with older Safari ignoring those three lines on nested flex items, @tracyjackson?