Get "PHP 8 in a Nuthshell" (Now with PHP 8.4)
Amit Merchant

Amit Merchant

A blog on PHP, JavaScript, and more

Centering content vertically with one line of CSS

Generally, when you want to center content vertically, you may reach for Flexbox or Grid. So, for instance, if you have a div with a height of 100px and you want to center its content vertically, you can do it with Flexbox like so.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Or in the case of Grid, you can do it like this.

.container {
  display: grid;
  place-items: center;
}

But if you’re only concerned about centering content vertically, you can do it with just one line of CSS!

Essentially, you can do it with the align-content property and set it to center.

So, when you apply this property to a block-level element, it will center its content vertically (or cross axis).

.container {
  align-content: center;
}

Here’s a CodePen to demonstrate it.

See the Pen The @scope demo by Amit Merchant (@amit_merchant) on CodePen.

As for the support, most modern browsers are supporting this property. So, it’s relatively safe to use this property in production.

👋 Hi there! I'm Amit. I write articles about all things web development. If you enjoy my work (the articles, the open-source projects, my general demeanour... anything really), consider leaving a tip & supporting the site. Your support is incredibly appreciated!

Comments?