Center Any Element with Flexbox
Stop struggling with margins and absolute positioning. Flexbox is the modern, battle-tested way to center any content perfectly.
When to use this solution:
Use this when you need an element to be perfectly in the middle of a container, like a loading spinner or a hero text block.
Common Use Cases
Centering login formsMiddle-aligned hero contentPerfectly centered iconsModal content alignment
1Step-by-Step Guide
Apply display: flex
Set the parent container's display property to 'flex'.
Justify content center
Set 'justify-content' to 'center' to align the child horizontally.
Align items center
Set 'align-items' to 'center' to align the child vertically.
Copy the CSS
Grab the generated CSS and apply it to your stylesheet.
Ready to get started?
Use our free tool to solve this problem in seconds. No installation required.
Generate Flexbox CSSFrequently Asked Questions
Does this work in all browsers?
Yes, Flexbox is fully supported by all modern browsers (99%+ of web traffic).
What if I have multiple items?
Flexbox will center all items as a group unless you change the wrapping or grow properties.