How do you center elements using display: flex or display: grid?

Set the parent container to display: grid.

place-items: center; centers children both horizontally and vertically.

Alternatively, use justify-items: center; for horizontal centering and align-items: center; for vertical centering.

Grid is particularly useful for centering multiple items or creating complex layouts.

Use Flexbox for single-axis layouts (row or column) and simple centering.

Use Grid when you need two-dimensional control and multiple items to be aligned.

For responsive designs, combine Flexbox or Grid with media queries for consistent centering on different screen sizes.