In Flexbox, which configuration centers items along both axes?

In Flexbox, which configuration centers items along both axes?

• A. text-align: center
• B. place-items: center
• C. justify-items: center
• D. align-items: center; justify-content: center

Answer: (D)

Centering flex items in both directions comes from using both axes controls on the container. In Flexbox, the main axis is governed by justify-content and the cross axis by align-items. When you set justify-content: center, the items are centered along the main axis (for a row layout, this is horizontally). When you also set align-items: center, the items are centered along the cross axis (vertically). Together, they place the items squarely in the middle of the container. The other possibilities don’t reliably achieve this across axes: text-align affects inline content, not the flex items themselves; justify-items is a grid-focused property and isn’t standard for flexbox; place-items is a grid shorthand and isn’t consistently supported for flexbox.

Centering flex items in both directions comes from using both axes controls on the container. In Flexbox, the main axis is governed by justify-content and the cross axis by align-items. When you set justify-content: center, the items are centered along the main axis (for a row layout, this is horizontally). When you also set align-items: center, the items are centered along the cross axis (vertically). Together, they place the items squarely in the middle of the container.

The other possibilities don’t reliably achieve this across axes: text-align affects inline content, not the flex items themselves; justify-items is a grid-focused property and isn’t standard for flexbox; place-items is a grid shorthand and isn’t consistently supported for flexbox.