Center anything
Flexbox is the shortest path to both-axis centering. `place-items: center` on a grid does the same in one line if the parent has a height.
#flexbox#grid#layout#centering
css
.parent {
display: flex;
align-items: center;
justify-content: center;
min-height: 100dvh;
}
/* grid one-liner */
.parent-grid {
display: grid;
place-items: center;
min-height: 100dvh;
}Related
Flexbox essentials
Flex works on one axis at a time. Set `flex-direction` first, then reason about `justify-content` (main axis) and `align-items` (cross axis). `gap` replaces margin hacks.
Grid essentials
Grid is two-dimensional. `repeat(auto-fit, minmax(...))` gives a responsive card layout without a single media query.