# Centering Techniques — CSS Fundamentals: Layout, Flexbox, Grid and Responsive Design

Source: https://www.skillbyai.com/en/css/css-centering

> Center content reliably with Flexbox, Grid place-items or absolute positioning plus transform.

## Flexbox centering

Works for any number of children, any size.

```css
.center-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
```

## Grid centering

`place-items: center` is a one-line shortcut for justify + align on a grid.

```css
.center-grid {
  display: grid;
  place-items: center;
  min-height: 100vh;
}
```

## Absolute + transform

For a single element inside a positioned parent: `position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);` — works even when the element's size is unknown.

**Quiz:** Which is the shortest way to center children in a grid container?

- [ ] margin: auto auto
- [ ] text-align: center
- [ ] float: center
- [x] place-items: center

*Answer:* place-items: center. place-items: center centers grid children on both axes in one declaration.