CSS Flexbox Centering Playground
Flexbox centers things with two properties on the parent. justify-content works along the main axis and align-items works across it. Set both to center and the child sits in the middle.
Presets
flex-direction
justify-content
align-items
gap and items
12px
Live preview
Generated CSS
flexbox Browser Support
Widely availableSince 201597% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2015.
Safe to use without fallbacks.
29+
20+
9+
12+