How do I center a div? (the definitive 2026 answer)

Question

I know it's a meme, but I genuinely keep forgetting. Horizontally, vertically, both. What's the modern way?

Accepted Answer

**Both axes, inside a parent:**
```css
.parent { display: grid; place-items: center; }
```

**Flexbox equivalent:**
```css
.parent { display: flex; justify-content: center; align-items: center; }
```

**Horizontally only, block element with a width:**
```css
.box { max-width: 600px; margin-inline: auto; }
```

**Inline or text content:** `text-align: center;` on the parent.

**Over everything (modal):**
```css
.modal { position: fixed; inset: 0; margin: auto; width: fit-content; height: fit-content; }
```

For vertical centering, remember the parent needs a height (e.g. `min-height: 100dvh` for a full screen). `dvh` accounts for mobile browser toolbars, unlike `vh`.

1 réponse