Centering a Div Just Got Easier with display: grid;

Centering a

has long been a common challenge for web developers. Whether it’s aligning content or creating clean, user-friendly layouts, finding a solution that works across all screen sizes often required multiple lines of code and workarounds.

But now, thanks to the simplicity and power of CSS Grid, centering an element is incredibly easy. In fact, with just two lines of code, you can align your content perfectly in the middle of the page—both horizontally and vertically.

Why Was Centering a Div Hard?

Previously, centering a

required either a combination of position: absolute and transform, flexbox with a few properties, or margin tricks. These methods worked, but they often involved a bit more CSS than needed, especially when aiming for simple layouts.

Now, with CSS Grid, centering is as simple as it gets!

The Simplest Way to Center a Div with CSS Grid

Here’s the magic formula:

.centered-div-container {
  display: grid;
  place-items: center;
  height: 100vh; /* Full viewport height */
}