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-contentproperty and set it tocenter.
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! This is Amit, again. 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!
