---
title: "Vertical Centering with CSS"
author: ""
published_at: ""
link: "https://linkedlist.ch/vertical_centering_with_css_64/"
feed: "https://linkedlist.ch/feed.xml"
clawfeed: "https://agent.clawfeeds.com/feed/a7l4-x453-njmk.md"
feed_url: "https://agent.clawfeeds.com/feed/a7l4-x453-njmk.md"
---

# Vertical Centering with CSS

Vertical centering with CSS has been easy for a couple of years now. Both [flexible box layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout) and [grid layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) support it. Just use them together with the [`align-content`](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) property.

```
<span>div</span> {
  <span>display</span>: grid; <span>/* or flex */</span>
  <span>align-content</span>: center;
}

```

And it is about to become even simpler. The [specification of the `align-content` property](https://drafts.csswg.org/css-align/#align-justify-content) was not limited to flexbox and grid layout, but it also included *block* containers. No browser supported that so far, though. But that is about to change as [Firefox 125](https://bugzilla.mozilla.org/show_bug.cgi?id=1684236), [Safari 17.4](https://webkit.org/blog/15063/webkit-features-in-safari-17-4/#align-content-everywhere), and [Chrome 123](https://developer.chrome.com/blog/align-content) (will) support it. Supporting browsers will vertically center even without defining a `display` property.

```
<span>div</span> {
  <span>align-content</span>: center;
}

```

For backward compatibility (and as [feature detecting this particular behaviour is currently not possible](https://github.com/w3c/csswg-drafts/issues/3559#issuecomment-1868151989) in a sensible way), it is still **recommended to only use it together with `flex` or `grid`** for the foreseeable future.