CodePark/ questions / Flexbox
START PRACTICINGPRACTICE
Frontend question · CSS & HTML › Flexbox

The parent has a fixed height and display: flex. Which declarations on the parent centre its single child both horizontally and vertically?

justify-content: center; align-items: center;

justify-content: center; align-items: center; is right. justify-content centres on the main axis, and align-items centres on the cross axis.

The
justify-items option is the tempting wrong answer. Flex layout ignores justify-items, which only works in grid. The vertical-align option is wrong because vertical-align only affects inline and table-cell boxes. In grid, place-items: center does the same job.