← Back to Gists

Flexbox centering

📝 CSS
kristenpalmer218
kristenpalmer218 · Level 8 ·

This CSS snippet centers an element both horizontally and vertically within its parent using flexbox.

CSS 
.parent { display: flex; justify-content: center; align-items: center; height: 100vh;
} .child { / no extra rules needed for centering /
}

Comments

0
mklein mklein

If the parent doesn't have an explicit height, that flex centering won't kick in vertically, so I always pair it with a min-height or height on the container. Did you run into that when the parent's height came from content?