Load the centered preset. It creates one item in a row container with justify-content: center and align-items: center. The first rule centers along the row’s main axis; the second centers along its cross axis. The generated item remains flex: 0 1 auto, so its own content size is preserved rather than stretched to fill the line.
Centering needs available cross-axis space
The capsule preview has a visible minimum height, so cross-axis centering is obvious. In your component, a container with only content height has no extra vertical space to distribute. Give the real container an intentional block size or min-height only when the design requires it; FlexWeave does not copy its preview height into generated CSS.
Expected copied rules
The container output includes display flex, row, nowrap, center justification, center item alignment and 16px row and column gaps. The single item rule is flex: 0 1 auto, align-self: auto and order: 0. HTML contains item 1 once in source order.
Verify the owning component
FlexWeave renders the validated visual model with the current browser, but it does not know your content, writing mode, focusable controls or supported viewport range. Paste the generated rules into the owning component, keep the source HTML in a meaningful order, and test narrow widths, zoom, long translations, keyboard navigation and assistive technology. Reverse direction and order never prove a correct reading sequence. Keep accepted CSS and HTML in source control because the capsule deliberately stores no project state.