center element with flexbox CSS
Before Flexbox, vertical centering in CSS required fragile tricks (`position: absolute` with `transform: translate(-50%, -50%)`, tables, or `line-height` matching the container height). With Flexbox, two lines solve it: `display: flex; justify-content: center; align-items: center;` centers any content on both axes, without knowing its width or height ahead of time.
Works even without knowing the child element size, the classic overlay/modal use case.
align-items centers the vertical alignment between icon and text of different heights, gap replaces manual margin between them.
place-items: center is shorthand for align-items plus justify-items, only exists under display: grid, and shares align-items' failure mode: with no defined container height, it will not center vertically.
justify-content aligns items along the main axis (set by flex-direction), align-items aligns along the cross axis, perpendicular to the main one. With `flex-direction: row`, justify-content controls horizontal alignment and align-items vertical, in `column` the two swap.
The most common cause is the flex container having no defined height, without a height (or min-height: 100vh, for example), align-items has no extra vertical space to distribute and the element ends up "centered" inside an area the size of the content itself.
place-items is a CSS Grid shorthand, not a Flexbox one, it does not exist as a flex container property. In Flexbox, it is always two separate properties (justify-content for the main axis, align-items for the cross one).
Yes, for specific cases. `margin: auto` on a flex item absorbs all available free space in that direction, useful for pushing a single item to the right (e.g., a logout button at the end of a navbar) without needing justify-content: space-between.
Click an item to edit it, drag to reorder it (changes each item's order).
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
gap: 16px;
}CSS is generated locally in your browser.